时间戳

首页 > 解决方案 > 对单个元素反应可拖动

reactjs - 对单个元素反应可拖动

问题描述

谢谢你的帮助。

我正在尝试通过使用 react-draggable 来制作包含单个单词可拖动的跨度标签。文本行来自 json 文件。如何将功能应用于每个单词而不是整行？我正在使用 @moxy/react-split-text 将文本拆分为单独的单词以应用 span 标签，这目前正在工作。也许我可以用另一种方式来做？提前感谢，非常感谢。

          {this.state.poem.map((item, i) => (
            <div key={"block-" + i}>
              {item.lines.map((line, i) => (
                <div key={"line-" + i}>
                  <Draggable handle=".word">
                    <SplitText className="word">{line}</SplitText>
                  </Draggable>
                </div>
              ))}
            </div>

标签： reactjs

解决方案

<div>{line.split(' ').map(word => <span className="word">{word}</span>)}</div>

您可以自己将其拆分为不同的单词，当然以上只会在单个空格之间拆分，这完全取决于您的文本的外观，以处理所有情况

推荐阅读