javascript - ... react.js 16 中的道具

Question

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

标签： javascriptreactjsecmascript-6

Answer 1

比方说

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

正在做

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

是相同的

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