How to dynamically add properties based on conditions in React components?

Question

Is there a way to add properties to a React component only when certain conditions are met?

I need to add required and readOnly attributes to the form element based on conditions in the post-rendered Ajax call, but I don't know how to solve this problem because readOnly="false" is completely different from Omitting attributes is different.

The example below should illustrate what I want, but it doesn't work.

(Parse error: unexpected identifier)

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

Answer 1

juandemarco's answer is usually correct, but there is another option here.

Construct an object to your liking:

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

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

Use spread for rendering, and you can also choose to pass other props.

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

Answer 2

Obviously, for some properties, if the value passed to React is not a true value, React will intelligently omit the property. For example:

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

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

will get:

<input type="text" required>

UPDATE: If anyone is curious about how and why this happens, you can find the details in the source code of ReactDOM, specifically in the DOMProperty.js file at page 30 Lines and 167 lines .