在无状态子组件中传递/访问道具

Question

我知道你可以像这样将所有的反应组件道具传递给它的子组件：

 const ParentComponent = () => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...this.props} />
   </div>
)

但是如果子组件是无状态的，那么你如何检索这些道具呢？我知道如果它是一个类组件，您可以将它们作为 this.prop.whatever 访问，但是您将什么作为参数传递给无状态组件？

 const ChildComponent = ({ *what goes here?* }) => (
   <div>
      <h1>Child Component</h1>
   </div>
)

原文由 Paulos3000 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当你写

const ChildComponent = ({ someProp }) => (
   <div>
      <h1>Child Component {someProp}</h1>
   </div>
)

从您传递给 childComponent 的所有道具中，您只是解构以仅获得 someProp 。如果您想要在 ChildComponents 中使用的道具数量在可用道具总数中是可数的（很少），那么解构是一个不错的选择，因为它提供了更好的可读性。

假设你想访问子组件中的所有道具，那么你不需要在参数周围使用 {} 然后你可以像 props.someProp

 const ChildComponent = (props) => (
   <div>
      <h1>Child Component {props.someProp}</h1>
   </div>
)

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 3.0 许可协议