遍历JSX.Elements的[]并动态地向其中添加类
遍历JSX.Elements的[]并动态地向其中添加类
提问于 2020-07-20 22:31:26
这似乎是一个边缘情况问题，但想象一下，如果我已经有了一个[]的JSX.Elements (特别是div)，并且已经有了它们的类。
我想动态添加一个className到它，这是可能的吗？我试着forEach它并添加el.props.className=""，但它是一个readOnly道具。
let allDivs = graphHeights.map((height) => {
return (
<div style={{ height: height }} className={styles["mini-div"]}></div>
);
});现在，我希望遍历allDivs的上述[]，并向它们添加特定的classNames
回答 1
Stack Overflow用户
发布于 2020-07-20 22:47:05
当您运行代码时，
<div style={{ height: height }} className={styles["mini-div"]}></div>将返回react元素，而不是组件。类似于react组件的实例。
所以你所拥有的是一个react元素数组。
要向react元素添加道具，您需要使用cloneElement
https://reactjs.org/docs/react-api.html#cloneelement
let allDivsChanged = allDivs.map(element => {
return React.cloneElement(element, { className: "replaceClassName" });
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63004734
复制
相似问题
使用SQLAlchemy继承选择特定列
SQLAlchemy选择多个列，如内连接
如何在sqlalchemy中选择多列连接的特定列？
使用SQLAlchemy选择具有强制转换的特定列
sqlalchemy:使用别名从多个联接中选择特定列
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
