Question

我想呈现一个像a = ["a", "b", "c"]这样的字符串数组，而没有像<div>a</div>这样的包装，但是还要遵循React的key = {index}规则

我考虑过使用Fragments <>，但是我发现我们无法将关键道具放入其中。

当前，我的代码是这个

<Paragraph>{a.map((item) => ({item}))}<Paragraph>

因此，我在这里无法遵循React的key = {index}规则。我想这样做，是因为我认为使用window.getSelection()选择文本以仅获取文本并将其推入字符串数组会更容易。

我希望渲染这样的东西

<Paragraph>
 <key="0">"a"</>
 <key="1">"b"</>
 <key="2">"c"</>
</Paragraph>

不是这样

<Paragraph>
 <span key="0">"a"</span>
 <span key="1">"b"</span>
 <span key="2">"c"</span>
</Paragraph>

希望我已经明确了我的问题。感谢您的阅读！我期待着您的回应！

Answer 1

您可以制作一个组件，该组件将呈现您的字母，然后可以在其上放置key。像这样：

const Character = ({ letter }) => <>{letter}</>;

const App = ({ arrayOfLetters }) => {
  return (
    <div className="App">
      {arrayOfLetters.map((letter, index) => (
        <Character key={index} letter={letter} />
      ))}
    </div>
  );
}

const arrayOfLetters = ["a", "b", "c", "d"];

const rootElement = document.getElementById("root");
ReactDOM.render(<App arrayOfLetters={arrayOfLetters} />, rootElement);

然后将生成您想要的HTML：<div class="App">abcd</div>，不呈现其他HTML元素，从而允许window.getSelection()仅获取文本。

https://codesandbox.io/s/4z08551xy4

如何在不使用包装的情况下在React中呈现字符串数组？

1 个答案: