当你写

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

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

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

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

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

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

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

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

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

更进一步，关于 jsx 中的扩展符号。

当您在组件中编写时：

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

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

{ prop1: value1, prop2: value2 }

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

因此，当您将扩展语法与 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 的输出。了解 jsx 的工作原理非常有趣，更一般地说，您可以如何使用 ES5 工具实现 es6 语法。

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

您可以使用扩展属性减少代码膨胀。这以{'somearg':123, ...props}or的形式出现{...this.props}，前者允许您设置一些字段，而后者是一个完整的副本。这是一个示例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} />，propsgetCallBackFuncordate将可供SomeComponent全班使用。这为我节省了大量的打字和/或复制/粘贴。

来源：ReactJS.org：深入 JSX，指定 React 元素类型，扩展属性。官方 POD：

如果你已经有 props 作为对象，并且你想在 JSX 中传递它，你可以使用 ... 作为“传播”操作符来传递整个 props 对象。这两个组件是等效的：

 return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
 const props = {firstName: 'Ben', lastName: 'Hector'};
 return <Greeting {...props} />;
}```

现在，让我们将其应用到您的代码示例中！

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

我想我会添加一个简单的 ES2015 解构语法，用于将所有props从功能父组件传递到功能子组件。

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

或者如果我有多个对象（父母的props，加上其他任何东西），我想作为props传递给孩子：

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

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