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行。