如何在反应中将道具从 parent 传递到 child？

Question

我一直在将一个最初位于一个文件中的小型应用程序重构为它自己的独立组件。目前我有一个 child 组件 UsersTable，我正在 parent Users2 中渲染。我正在将 parent 中的一些虚拟数据作为道具传递给 child 但我得到了可爱的 Cannot read property 'map' of undefined.

我在 parent:

<UsersTable {...columns} {...data} />

child 在这里收到：

    export const UsersTable = props => {
  const [usersState, setUsersState] = useState(props)

  useEffect(() => {
    setUsersState(props)
  }, [props])

  const renderUsers = () => {
    if (usersState) {
      return usersState.map(d => items(d))
    } else {
      return noData
    }
  }

还有下面的return功能这里：

<ActionList columns={usersState}>{renderUsers}</ActionList>

我特别想弄清楚为什么数据属性（objects 的数组）是 return 未定义的。链接我的沙箱 here。我想知道这个问题是否可能与通过传播运算符传递多个单独的道具有关。

任何关于我正在努力完成的事情的帮助或建议将不胜感激！

Answer 1

这不是传递道具的正确方式。

道具作为对象的属性传递，因此您需要为其定义名称和值。

例如，你需要写，

<UsersTable {...columns} {...data} />

作为

<UsersTable columns={columns} data = {data} />

现在 UserTable 组件将得到这个 props 对象，

props = { 
columns=the column data,
data = the data
}

要使用这个道具，你可以使用解构

const {data, columns} = props;

或者你可以使用点符号， props.column & props.data

Answer 2

你需要通过属性

<UsersTable columns={...columns} data={...data} /> /*<-- Changes */

export const UsersTable = props => {
  const [usersState, setUsersState] = useState(props)

  useEffect(() => {
    setUsersState(props)
  }, [props])

  const renderUsers = () => {
    if (usersState) {
      return usersState.map(d => items(d))
    } else {
      return noData
    }
  }

<ActionList columns={usersState}>{renderUsers}</ActionList>

Answer 3

父组件：

<UsersTable columns={columns} data={data} />

查看我的 github 以了解如何以类似方式使用挂钩和道具的示例：

https://github.com/RyanJMorris11/helloReactHooks/blob/master/src/components/userList.js

Answer 4

在User2组件中，导入UsersTable组件需要修改：

<UsersTable {...columns} {...data} />

对此：

<UsersTable columns={columns} data={data} />

并且在 UserTable 组件中您需要更改：

const [usersState, setUsersState] = useState(props)

至：

const [columns, setColumns] = useState(props.columns)
const [users, setUsers] = useState(props.data)

renderUsers 将是：

  const renderUsers = () => {
    if (users) {
      return users.map(d => items(d))
    } else {
      return noData()
    }
  }

最后，像这样导入 ActionList 组件：

<ActionList columns={columns}>{renderUsers()}</ActionList>

之后，UsersTable 组件将正常工作。

如何在反应中将道具从 parent 传递到 child？

How to pass props from parent to child in react?

javascript

reactjs

react-props

react-component

react-hooks