javascript - 如何有条件地向 React 组件添加属性？

Question

有没有办法只在满足特定条件时才向 React 组件添加属性？

我应该在渲染后基于 Ajax 调用向表单元素添加 required 和 readOnly 属性，但我看不出如何解决这个问题，因为 readOnly="false" 不是与完全省略属性相同。

下面的例子应该解释我想要什么，但它不起作用。

(Parse Error: Unexpected identifier)

function MyInput({isRequired}) {
  return <input classname="foo" {isRequired ? "required" : ""} />
}

Answer 1

显然，对于某些属性，如果您传递给它的值不真实，React 足够智能，可以忽略该属性。例如:

const InputComponent = function() {
    const required = true;
    const disabled = false;

    return (
        <input type="text" disabled={disabled} required={required} />
    );
}

将导致:

<input type="text" required>

更新:如果有人对这种情况发生的方式/原因感到好奇，您可以在 ReactDOM 的源代码中找到详细信息，特别是在第 30 行。和 167的DOMProperty.js文件。