Question

假设我有3个道具，我的基于类的组件需要并实现，即

<Component propOne={this.props.one} propTwo={this.props.two}>
  {this.props.children}
</Component>

我如何传递我原本不期望的任何其他道具，但是说使用我的组件的其他人会想要使用？

我在想

<Component propOne={this.props.one} propTwo={this.props.two} {...this.props} >
  {this.props.children}
</Component>

但我担心道具重复

Answer 1

使用点差运算符

let {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>

Answer 2

过滤它们？

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>

Answer 3

尝试使用一个属性名称将整个属性作为一个对象发送。就是这样

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

Answer 4

spread运算符很棒，但令我惊讶的是我没有在教程中发现它，然后花了很长时间才找到描述它的可靠来源。如果您怀疑它是如何工作的，请参阅一份名为JSX In Depth ...

的小文章，这是官方ReactJS POD中的详细信息。

如果您已经具有props作为对象，并且想要在JSX中传递它，则可以使用...作为“ spread”运算符来传递整个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} />;
};
在上面的示例中，种类prop被安全使用，并且不会传递给DOM中的元素。所有其他道具都通过... other对象传递，从而使该组件真正灵活。您会看到它传递了onClick和儿童道具。

来源：ReactJS.org: JSX In Depth, Specifying the React Element Type, Spread Attributes。

针对您的具体情况...

const {propOne, propTwo, ...newChildProps} = this.props;
<Component
    propOne={this.props.one}
    propTwo={this.props.two}
    {...newChildProps}
>{children}</Component>

如何通过所有其他道具来反应类？

4 个答案: