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

我知道你可以将所有的反应组件道具传递给它的子组件,如下所示：

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>
)

解决方法:

当你写作

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>
)

标签：stateless,javascript,reactjs,components
来源： https://codeday.me/bug/20190926/1822075.html