... react.js中的道具16

时间:2018-11-21 09:32:49

标签: javascript reactjs ecmascript-6

我真的不知道{... 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在这种情况下会做什么,因为我们这里没有任何组件,这是一个全新的组件,是否意味着当我重用此组件时,我会给它我想要的任何道具吗?

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

{...props}添加到元素中将获取一个名为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} />;
  }
}