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