我想渲染这样的字符串数组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>
希望我能明确说明我的问题。感谢您的阅读！我期待着您的回应！
您可以制作一个组件，将呈现您的字母，然后将其放置在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()而仅获取文本。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句