时间戳

首页 > 解决方案 > 如何将道具传递给使用地图渲染的 ReactNode 对象？

javascript - 如何将道具传递给使用地图渲染的 ReactNode 对象？

问题描述

function fun(){
    const [contentArray,setContentArray] = useState([]);
    setContentArray([...contentArray, <A />]);
    setContentArray([...contentArray, <A />]);
    setContentArray([...contentArray, <A />]);
    return(
      <div>
      {
        contentArray.map( (component:React.ReactNode,i:number) => {
          return(
            component
          )}
      }
      </div>
     })
   );
}

只要我不想将任何道具传递给“contentArray”数组的这些数组元素，上面的代码就可以正常工作。但我想将索引作为道具传递给这些数组元素代码沙箱：https ://codesandbox.io/s/quirky -cray-u4jr1?from-embed

标签： javascriptreactjstypescriptuser-interfaceredux

解决方案

在设置状态时，它应该如下完成

setState(prevState => [...prevState, A]

并且在渲染它时它应该被渲染如下

{state.map((Comp, i) => { return <Comp key={i} index={i} />; })}

注意：不需要将 type 指定为 React.ReactNode，并且需要注意不要在 render 中设置 state，react 不允许这样做，以避免无限循环。

感谢您展示如何做到这一点@bpas247 https://codesandbox.io/s/broken-flower-z87mt

推荐阅读