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

Question

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

<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

使用传播语法：

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

Answer 2

展开运算符很棒，但我很惊讶我没有在教程中发现它，然后花了很长时间才找到描述它的可靠来源。 如果你怀疑它是如何工作的，这里是官方 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 中的元素。 所有其他道具都通过 ...other 对象传递，使这个组件非常灵活。 你可以看到它传递了一个 onClick 和 children 道具。

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

对于您的具体情况...

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

Answer 3

过滤它们？

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 4

尝试将整个属性作为一个属性名称下的对象发送。 像这样

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 5

✅ 这是我的做法：

export default function Button(props) {
  const { children, label, ...rest } = props;
  
  return (
    <button
      {...rest}
      aria-label={label}
    >
      {children}
    </button>
  )
}

✨ 请注意，有时您不需要与给定道具命名相同的属性，所以在这里我提取label并将其传递给aria-label 。