如何在react中将道具从父母传递给孩子

Question

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

我正在使用反应挂钩和传递道具与父级中的排列运算符：

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

孩子在这里收到了：

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>

我特别想弄清楚为什么数据道具(一个对象数组(返回undefined。在这里链接我的沙箱。我想知道这个问题是否与通过扩散操作符传递多个单独的道具有关。

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

Answer 1

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

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

对于ex，你需要写，

<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

在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组件将正常工作。

Answer 4

父组件：

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

请参阅我的github，了解如何以类似的方式使用钩子和道具的示例：

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