... react.js 16 中的道具 [重复]答案

【问题标题】：...props in react.js 16 [duplicate]... react.js 16 中的道具 [重复]
【发布时间】：2019-04-23 20:09:30
【问题描述】：

我真的不明白 {...props} 是做什么的？我知道您可以通过这种方式更轻松地“卸载”所有道具，但是如果我们还没有任何道具呢？例如，考虑这段代码

const input = (props) =>{
    let inputElement = null;

    switch(props.inputtype) {
        case('input'):
            inputElement = <input className={classes.InputElement} {...props} />
            break;
        case('textarea'):
            inputElement = <textarea className={classes.InputElement} {...props} />
            break;
        default:
            inputElement = <input className={classes.InputElement} {...props} />;
    }

    return(
        <div className={classes.Input}>
            <label className={classes.Label}> {props.label} </label>
            {inputElement}
        </div>
    );
}

...props 在这种情况下是做什么的，因为我们这里没有任何组件，这是一个全新的组件，这是否意味着当我重用这个组件时，我可以给它任何我想要的道具？

【问题讨论】：

How much research effort is expected of Stack Overflow users?

标签： javascript reactjs ecmascript-6

【解决方案1】：

我们说

props = {
   propA: 'a',
   propB: 'B'
};

在做

<input className={classes.InputElement} {...props} />

与

相同

<input className={classes.InputElement} propA={'a'} propB={'B'} />

【讨论】：

【解决方案2】：

将{...props} 添加到元素将获取一个名为props 的对象，其中包含键/值对，并将它们作为道具传递给元素。

名称甚至不必是{...props}。您可以将任何对象传递给它。

例如，而不是以下：

class FavouriteEmployee extends Component {
  render() {
    return <Employee name=“Dave” location=“New York” />;
  }
}

您可以改为：

class FavouriteEmployee extends Component {
  render() {
    const employeeDetails = {
      name: “Dave”,
      location: “New York”
    };
    return <Employee {...employeeDetails} />;
  }
}

【讨论】：