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

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

Answer 2

您是否正在寻找ES6命名参数语法（仅仅是解构）？

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

const ChildComponent = (props) => ( // without named arguments
    <div>
     <h1>Child Component</h1>
 </div>
)

根据您是否为组件指定上下文，您的函数还有第二个参数。

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

进一步了解jsx中的传播符号。

当您在组件中书写时：

<Child prop1={value1} prop2={value2} />

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

{ prop1: value1, prop2: value2 }

（请注意，它不是Map，而是仅包含字符串作为键的对象。）

因此，当您将 spread 语法与JS对象一起使用时，它实际上是此的快捷方式

const object = { key1: value1, key2: value2 }
<Component {...object}/>

相当于

<Component key1={value1} key2={value2} />

实际编译为

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

你当然可以使用第二种语法，但要小心顺序。更具体的语法（prop = value）必须是最后一个：更具体的指令是最后一个。

如果你这样做：

<Component key={value} {...props} />

它编译为

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

如果你这样做（你应该做什么）

<Component {...props} key={value} />

它编译为

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

其中extends是* Object.assign（如果不存在则是polyfill）。

为了更进一步，我建议花点时间观察Babel与online editor的输出。理解jsx如何工作非常有趣，更一般地说，如何使用ES5工具实现es6语法。

Answer 3

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

const ChildComponent = ({prop1, ...rest}) =>{
  <div>
    <h1>Child Component with prop1={prop1}</h1>
    <GrandChildComponent {...rest} />
  </div>
}

const GrandChildComponent = ({prop2, prop3})=> {
  <div>
    <h1>Grand Child Component with prop2={prop1} and prop3={prop3}</h1>
  </div>
}

Answer 4

我想我会添加一个简单的ES2015解析语法，用于将所有道具从功能性父级传递给功能性子组件。

const ParentComponent = (props) => (
  <div>
    <ChildComponent {...props}/>
  </div>
);

或者，如果我有多个对象（父级的道具，加上其他任何东西），我希望将其作为道具传递给孩子：

const ParentComponent = ({...props, ...objectToBeAddedToChildAsProps}) => (
  <div>
    <ChildComponent {...props}/>
  </div>
);

这种解构语法类似于上面的答案，但它是我从功能组件传递道具的方式，我认为它非常干净。我希望它有所帮助！

Answer 5

这是减少代码膨胀的一个很好的策略。以下是ParentClass.js：

的示例

import React from 'react';
import SomeComponent from '../components/SomeComponent.js';

export default class ParentClass extends React.Component {
    render() {
        <SomeComponent
            {...this.props}
        />
    }
}

如果我这样做，<ParentClass getCallBackFunc={() => this.getCallBackFunc()} />，或者我<ParentClass date={todaysdatevar} />，getCallBackFunc或date道具将可供SomeComponent班级使用。

来源：https://zhenyong.github.io/react/docs/transferring-props.html

Answer 6

但是，如果子组件是无状态的，那么如何检索这些道具呢？

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

ChildComponent保存名称，props将成为箭头函数语法中的参数，正如您所需：

 const ChildComponent = props => (
   <div>
     <p>{props.value ? props.value : "No value."}</p>
   </div>
 );

如果你是Babel，它会创建这样的东西：

 var ChildComponent = function ChildComponent(props) {
   return React.createElement(
     "div",
     null,
     React.createElement(
       "p",
       null,
       props.value ? props.value : "No value."
     )
   );
 };

Answer 7

出于某种原因，似乎对我有用的是Shubham's answer above的变体：

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

Answer 8

使用此

const ParentComponent = ({ prop1, prop2, prop3 }) => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...{ prop1, prop2, prop3 }} />
   </div>
);

const ChildComponent = ({ prop1, prop2, prop3 }) =>{
  <div>
    <h1>Child Component with prop1={prop1}</h1>
    <h1>Child Component with prop2={prop2}</h1>
    <h1>Child Component with prop2={prop3}</h1>
  </div>
}

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

8 个答案: