javascript - 如何在传递 props 时访问所有元素 props，而不必在 React 中列出它们？

Question

我正在将 Prop 传递给输入，并且必须列出每个输入 Prop 才能使其正常工作。

所以我有一个像这样的组件，它有一个输入:

<input 
   type={this.props.type}
   className={this.props.className}
   style={this.props.style}
   placeholder={this.props.placeholder}
   onChange={this.props.onChange}
   value={this.props.value}
   defaultValue={this.props.defaultValue}
   name={this.props.name}
/>

这个组件做了更多的事情，但这与本文的要点无关。无论如何，有没有一种方法可以不必输入所有这些内容并使其自动接受 prop 值？我尝试在输入中执行类似 {...this.props} 的操作，但它不起作用。

Answer 1

只要 props 对象键与输入的可能 props 相同，这应该可以工作:

<input {...this.props} />

其中 props 的形状如下:

{
   type,
   className,
   style,
   placeholder,
   onChange,
   value,
   defaultValue,
   name,
   //other input element attributes
}