如何在 React 中将 props 传递给子组件答案

【问题标题】：How to pass props down to child component in React如何在 React 中将 props 传递给子组件
【发布时间】：2021-11-19 19:58:53
【问题描述】：

所以在我的主组件中，我将 props 发送到这样的子组件：

<div className={styles.navBar}>
          <MasterNavBar color={false} scrollChange={true} />
</div>

MasterNavBar 可以正确访问道具，但我需要 MasterNavBar 将这些道具传递给名为 NavBar 的子组件，我目前这样做：

<NavBar props />

但是，当我这样做时，无法在我的 NavBar 组件文件中访问这些道具。例如，在 NavBar 中，执行 props.color 来获取我的颜色 prop 返回 undefined。那么，我是错误地传递了我的道具，还是我错过了其他东西？

【问题讨论】：

标签： javascript reactjs react-props react-component

【解决方案1】：

正如 Antonio Pantano 所说，您可以将整个道具传递给 <NavBar {...props}/> 组件，但这是一种不好的做法。这个article 解释了为什么这是一种不好的做法。所以你可以通过以下两种方式将 MasterNavBar 属性传递给它的孩子：

const MasterNavBar = (props) => {
 /* 
      rest of your code                    
*/ 

  return <NavBar color={props.color} scrollChange={props.scrollChange}/>

}

或

const MasterNavBar = ({color, scrollChange}) => {
 /* 
      rest of your code                    
*/ 
  return <NavBar color={color} scrollChange={scrollChange}/>

}

您可以根据需要更改NavBar props 的名称，并通过这些名称在NavBar 组件中访问它们。

【讨论】：

【解决方案2】：

这取决于 NavBar 所期望的道具。如果您不关心打字（使用 typescript 或 react PropTypes），您可以简单地这样做：

<NavBar {...props} />

但这不是最好的方法，可能会导致性能问题。

【讨论】：