假设我有 3 个基于类的组件需要并实现的props，即
<Component propOne={this.props.one} propTwo={this.props.two}>
{this.props.children}
</Component>
我将如何传递我最初不期望的任何其他props，但说使用我的组件的其他人想要使用？
我刚在想
<Component propOne={this.props.one} propTwo={this.props.two} {...this.props} >
{this.props.children}
</Component>
但我担心props重复
使用传播语法：
const {propOne, propTwo, ...leftOver} = this.props;
// `leftOver` contains everything except `propOne` and `propTwo`
所以你的例子会变成：
const { propOne, propTwo, children, ...props } = this.props;
<Component propOne={propOne} propTwo={propTwo} {...props}>
{children}
</Component>
展开语法(
...) 允许在需要零个或多个参数（用于函数调用）或元素（用于数组文字）的地方扩展诸如数组表达式或字符串之类的可迭代对象，或在零个地方扩展对象表达式或更多的键值对（用于对象文字）。
来源：MDN
展开运算符很棒，但我很惊讶我没有在教程中发现它，然后花了很长时间才找到描述它的可靠来源。如果你怀疑它是如何工作的，这里是官方 ReactJS POD 中的详细信息，来自一篇名为JSX In Depth的小文章......
如果你已经有 props 作为对象，并且你想在 JSX 中传递它，你可以使用 ... 作为“传播”操作符来传递整个 props 对象。这两个组件是等效的：
return <Greeting firstName="Ben" lastName="Hector" />; } function App2() { const props = {firstName: 'Ben', lastName: 'Hector'}; return <Greeting {...props} />; }```
而且，当然，对于您的情况，您只想传递一些孩子......
const Button = props => { const { kind, ...other } = props; const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton"; return <button className={className} {...other} />; };在上面的例子中， kind 属性被安全地使用，并且不会传递给 DOM 中的元素。所有其他props都通过 ...other 对象传递，使这个组件非常灵活。你可以看到它传递了一个 onClick 和 children props。
来源：ReactJS.org：深入 JSX，指定 React 元素类型，扩展属性。
对于您的具体情况...
const {propOne, propTwo, ...newChildProps} = this.props;
<Component
propOne={this.props.one}
propTwo={this.props.two}
{...newChildProps}
>{children}</Component>
过滤它们？
function without(props, keys) {
return Object.keys(props)
.filter((key) => keys.indexOf(key) !== -1)
.reduce((retVal, key) => {
retVal[key] = props[key];
}, {});
}
<Component propOne={this.props.one} propTwo={this.props.two} {...without(this.props, ['one', 'two'])} >
{this.props.children}
</Component>
尝试将整个属性作为一个属性名称下的对象发送。像这样
class ParentComponent extends Component{
state={
person:{
id=1,
name="rashid",
family="behnam"
}
}
render(){
return <ChildComponent wholething={this.state.person} />
}
}
//------------------------------------------
class ChildComponent extends Component{
render(){
const {id,name,family}=this.props.wholething;
return (
<div someId={id}>
<h3>My name is :{name}</h3>
<h4>My family is :{family}</h4>
</div>
);
}
}