在react中使用正确的模式添加id，而不直接使用道具传递id，但通过映射吗？
提问于 2021-08-27 19:38:12
我在Codesandbox上有这段代码，目标是能够通过5 Divs，在加载时使用使用效果。第二个选项是，如果用户喜欢的话，可以在单击时添加div。该代码部分工作，但它有一个反模式问题，即将组件置于状态，而不是使用map更改状态以传递更改。请看一看，我想听听您对此的看法，我所理解的是导入这样的Div元素可能会影响性能，我希望尽可能避免不良实践。
import React, { useEffect, useState } from "react";
import Div from "./Div";
import "./styles.css";
import { v4 as uuidv4 } from "uuid";
export default function App() {
useEffect(() => {
// on start add 5 divs in to the local state Array on the frist load
});
const [div, setDiv] = useState([]);
const addDiv = () => {
// add an extra div on click if needed with id using the right pattern
setDiv([...div, <Div id={uuidv4()} />]);
};
return (
<div className="App">
{div}
<button onClick={addDiv} type="button">
Click Me!
</button>
</div>
);
}
//Dev dependencise
"uuidv4": "6.2.12"
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-27 19:51:09
将JSX元素放入状态是个坏主意，因为它们不会是反应性的--您将无法(可靠地)传递状态、状态设置器和其他有用的东西，如道具。
与其说这是性能问题，不如说是代码可维护性问题--如果向Div组件和App添加其他功能，您可能会发现，由于状态关闭的JSX元素陈旧的值，当前的方法无法工作。
如果需要删除值的能力，可以在数组中使用div的索引，并根据需要将其传递下去。举一个快速而肮脏的例子：
function App() {
const [texts, setTexts] = React.useState([]);
const [text, setText] = React.useState('');
React.useEffect(() => {
setTexts(['a', 'b', 'c', 'd', 'e']);
}, []);
const addDiv = () => {
setTexts([...texts, text]);
setText('');
};
return (
<div className="App">
{
texts.map((text, i) => (
<div>
<span>{text}</span>
<button onClick={() => setTexts(texts.filter((_, j) => j !== i))}>delete</button>
</div>
))
}
<button onClick={addDiv} type="button">
Click Me!
</button>
<input value={text} onChange={e => setText(e.target.value)} />
</div>
);
}
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>
Stack Overflow用户
发布于 2021-08-27 19:44:36
只需在数组中添加id并使用map呈现
{div.map(id => (
<Div key={id} id={id} />
))}
const addDiv = () => {
setDiv([...div, uuidv4()]);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68961184
复制相关文章
![【Groovy】Groovy 方法调用 ( 使用 对象名.成员名 访问 Groovy 类的成员 | 使用 对象名.‘成员名‘ 访问类的成员 | 使用 对象名[‘成员名‘] 访问类成员 )](https://developer.qcloudimg.com/http-save/yehe-2542479/0c0ed16739e62d10b7d93e184bffaf88.png)
相似问题
如何在json数据中动态添加属性和值
如何在字典值中添加前缀和后缀
Map<String，String[]>；属性(如键和值对)的JSON
在json属性名中添加下划线前缀
前缀JSON值- JSON/JQuery
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
