React组件中如何根据条件动态添加属性？

Question

是否有一种方法，只有在满足特定条件时才向React组件添加属性？

我需要在渲染后的Ajax调用中根据条件向表单元素添加required和readOnly属性，但我不知道如何解决这个问题，因为readOnly="false"与完全省略属性不同。

下面的示例应该说明我想要的，但它不起作用。

(解析错误：意外的标识符)

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

Answer 1

juandemarco的答案通常是正确的，但这里还有另一种选择。

按照您的喜好构建一个对象：

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition) {
  inputProps.disabled = true;
}

使用spread进行渲染，还可以选择传递其他props。

<input
    value="这个值会被inputProps覆盖"
    {...inputProps}
    onChange={overridesInputProps}
 />

Answer 2

显然，对于某些属性，如果传递给React的值不是真值，React会智能地省略该属性。例如：

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

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

将会得到：

<input type="text" required>

更新：如果有人对此如何发生以及为什么发生感到好奇，你可以在ReactDOM的源代码中找到详细信息，具体位于DOMProperty.js文件的第30行和167行。