Question

在以下情况下使用时，我无法绕过传播操作员：

const renderField = ({input, label, type, meta: {touched, error, warning}}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched &&
        ((error && <span>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </div>
  </div>
)

在这种情况下，它是否采用所有道具并将其设置为输入。 propname ？

Answer 1

是的！传播input时，您的组件会自动获取其属性。

让我们说input是：

const input = {
  type: 'text',
  value: 'new value',
  placeholder: 'Type anything'
}

传播后，您渲染的组件将是：

<input type="text" placeholder="Type anything" value="new value" />

Answer 2

您在组件中使用JSX。如果你查看链接的文章，JSX基本上只是React.createElement的包装器。每当您在JSX中使用大括号时，您实际上都在执行常规JavaScript语句。

因此，在您的情况下，实际发生的事情（简化）如下：

React.createElement('input', {placeholder: label, ...input})

如果您的input变量包含其他道具，例如value，则根据spread operator specification，这些道具将添加到原始道具对象（{placeholder: label}）中。

The spread syntax is also documented in the JSX explanation article.

组件中的扩展运算符反应

2 个答案: