How to dynamically add properties based on conditions in React components?
P粉665427988
P粉665427988 2023-08-20 14:54:00
0
2
602
<p>Is there a way to add properties to a React component only when certain conditions are met? </p> <p>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 <code>readOnly="false"</code> is completely different from Omitting attributes is different. </p> <p>The example below should illustrate what I want, but it doesn't work. </p> <blockquote> <p>(Parse error: unexpected identifier)</p> </blockquote> <pre class="brush:js;toolbar:false;">function MyInput({isRequired}) { return <input classname="foo" {isRequired ? "required" : ""} /> } </pre> <p><br /></p>
P粉665427988
P粉665427988

reply all(2)
P粉545218185

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}
 />
P粉863295057

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 .

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template