Wie füge ich Eigenschaften basierend auf Bedingungen in React-Komponenten dynamisch hinzu?

Question

Gibt es eine Möglichkeit, Eigenschaften nur dann zu einer React-Komponente hinzuzufügen, wenn bestimmte Bedingungen erfüllt sind?

Ich muss dem Formularelement basierend auf den Bedingungen im nachgerenderten Ajax-Aufruf erforderliche und readOnly-Attribute hinzufügen, weiß aber nicht, wie ich dieses Problem lösen kann, da readOnly="false"< /code> ist völlig anders als das Weglassen von Attributen.

Das folgende Beispiel soll veranschaulichen, was ich möchte, aber es funktioniert nicht.

(Analysefehler: unerwarteter Bezeichner)

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