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

const ParentComponent = () => (
   

     
Parent Component
     
   
)

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

const ChildComponent = ({ *what goes here?* }) => (
   

      
Child Component
   
)

Shubham Khat.. 19

当你写作

const ChildComponent = ({ someProp }) => (
   

      
Child Component {someProp}
   
)

从你传递给childComponent你的所有道具,你只是为了得到解构someProp.如果要在ChildComponents中使用的道具数量在可用的道具总数中是可数的(很少),则解构是一个很好的选择,因为它提供了更好的可读性.

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

const ChildComponent = (props) => (
   

      
Child Component {props.someProp}
   
)

---

小智.. 10

您在寻找ES6命名参数语法(仅仅是解构)吗？

const ChildComponent = ({ propName }) => (
    

     
Child Component
 
)

const ChildComponent = (props) => ( // without named arguments
    

     
Child Component
 
)

(可选)您的函数还有第二个参数,具体取决于您是否指定了上下文为组件.

也许通过链接到文档会更有帮助.如第一篇关于功能组件的文章所述.传递给组件的任何道具都表示为作为第一个参数传递给功能组件的对象.

更进一步,关于jsx中的传播符号.

在组件中写入时:

您的组件将收到的是一个普通对象,如下所示:

{ prop1: value1, prop2: value2 }

(请注意,它不是Map,而是仅包含字符串作为键的对象).

因此,当您使用带有JS对象的spread语法时,它实际上是一个快捷方式

const object = { key1: value1, key2: value2 }

相当于

实际上编译成

return React.createElement(Component, object); // second arg is props

你当然可以使用第二种语法,但要小心顺序.更具体的语法(prop = value)必须是最后的:更具体的指令是最后的.

如果你这样做:

它编译成

React.createElement(Component, _extends({ key: value }, props));

如果你这样做(你应该做什么)

它编译成

React.createElement(Component, _extends(props, { key: value }));

其中extends是*Object.assign(如果不存在则为polyfill).

为了更进一步,我建议花一些时间用他们的在线编辑器来观察Babel的输出.了解jsx如何工作非常有趣,更一般地说,如何使用ES5工具实现es6语法.

1> Shubham Khat..：

---

当你写作

const ChildComponent = ({ someProp }) => (
   

      
Child Component {someProp}
   
)

从你传递给childComponent你的所有道具,你只是为了得到解构someProp.如果要在ChildComponents中使用的道具数量在可用的道具总数中是可数的(很少),则解构是一个很好的选择,因为它提供了更好的可读性.

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

const ChildComponent = (props) => (
   

      
Child Component {props.someProp}
   
)

2> 小智..：

---

您在寻找ES6命名参数语法(仅仅是解构)吗？

const ChildComponent = ({ propName }) => (
    

     
Child Component
 
)

const ChildComponent = (props) => ( // without named arguments
    

     
Child Component
 
)

(可选)您的函数还有第二个参数,具体取决于您是否指定了上下文为组件.

也许通过链接到文档会更有帮助.如第一篇关于功能组件的文章所述.传递给组件的任何道具都表示为作为第一个参数传递给功能组件的对象.

更进一步,关于jsx中的传播符号.

在组件中写入时:

您的组件将收到的是一个普通对象,如下所示:

{ prop1: value1, prop2: value2 }

(请注意,它不是Map,而是仅包含字符串作为键的对象).

因此,当您使用带有JS对象的spread语法时,它实际上是一个快捷方式

const object = { key1: value1, key2: value2 }

相当于

实际上编译成

return React.createElement(Component, object); // second arg is props

你当然可以使用第二种语法,但要小心顺序.更具体的语法(prop = value)必须是最后的:更具体的指令是最后的.

如果你这样做:

它编译成

React.createElement(Component, _extends({ key: value }, props));

如果你这样做(你应该做什么)

它编译成

React.createElement(Component, _extends(props, { key: value }));

其中extends是*Object.assign(如果不存在则为polyfill).

为了更进一步,我建议花一些时间用他们的在线编辑器来观察Babel的输出.了解jsx如何工作非常有趣,更一般地说,如何使用ES5工具实现es6语法.