从 jsx 获取结果渲染反应组件

Question

我正在尝试渲染获取的数据，这是一个要渲染的 JSX 数组。

return(dataList.map((data) => (
                <CustomComponent1>
                    <CustomComponent2>{data.name}</CustomComponent2> 
                </CustomComponent1>
      )));

我得到这样的结果

[
    {
        "key": null,
        "ref": null,
        "props": {
            "children": [
                {
                    "key": null,
                    "ref": null,
                    "props": {
                        "textAlign": "left",
                        "verticalAlign": "top"
                    },
                    "_owner": null,
                    "_store": {}
                },
                
......

首先，我没有看到 children 使用传递的值进行更新。我怎样才能给每个条目一个唯一的密钥？如何将其渲染为 parent 组件上的反应元素？谢谢！

Answer 1

How can I give a unique key to each entry?

您应该在迭代中向子元素添加 key 属性。这将帮助您识别多个相似元素中的元素。

请注意，在这种情况下 id 会更合适，但我使用 item.name 作为键，因为我不知道您的数据是否有 id 与否。

I don't see children getting updated with the value passed

您的上述逻辑似乎是正确的，但您的问题可能来自状态更新。由于 React 不变性规则的性质，您不能改变状态，只能创建一个与状态映射的新对象。

const mockedDataList = [{ name: "name 1" }, { name: "name 2" }, { name: "name 3" }]

const ChildComponent = ({ children }) => {
   return children
}

const ParentComponent = () => {
   const [dataList,setDataList] = React.useState(mockedDataList)
   const mappedElements = dataList.map((data) => <ChildComponent key={data.name}>{data.name}</ChildComponent>);
   const handleClick = () => {
      //cannot do this
      //dataList[1] = "name 4"
      //setDataList(dataList)
      //-----------
      //should do this instead
      const updatedDataList = dataList.map(data => data.name === "name 2" ? {...data, name: "name 4"} : data)
      setDataList(updatedDataList)
   }
   console.log(mappedElements);
   return <div>
   {mappedElements}
   <button onClick={handleClick}>Change name 2 to name 4</button>
   </div>
}

ReactDOM.render(
  <ParentComponent/>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

从 jsx 获取结果渲染反应组件

Render react component from jsx fetch result

jsx

reactjs