javascript - 对象内的javascript对象

Question

我正在研究反应并使用 ant 设计列表组件，使其成为无状态子组件，以便在任何地方使用它。我的数据源（在本例中为 props.datasource）是对象数组。列表组件遍历每个对象。

关于列表组件的标题和描述，我想传递我无法做到的道具。现在它是 title = {item.line1} 和 description = {item.city}，这里“line1”和“city”是预定义的，但我想使用道具。我想从父组件传递 title="line1" ，然后在列表组件标题字段中将其用作 {props.title} 。

<List
dataSource={props.dataSource}
renderItem={(item) => (
<List.Item
  key={item.id}
>
  <List.Item.Meta
    avatar={
      <Avatar
        icon={<CheckOutlined />} //anything 
      />
    }
    title={item.line1}
    description={item.city}
  />
</List.Item>
)}
/>

尽我所能，我无法做到这一点，如何在对象内添加对象？

谢谢

标签： javascriptreactjsantd

Answer 1

如果我理解正确，您需要的是解构子组件的道具，它可以这样实现：

<List
  dataSource={props.dataSource}
  renderItem={(item) => (
    <List.Item
      key={item.id}
    >
      <List.Item.Meta
        avatar={
          <Avatar
            icon={<CheckOutlined />} //anything 
          />
        }
        {...item} // Like this
      />
    </List.Item>
  )}
/>