How to dynamically add properties based on conditions in React components?
P粉665427988
2023-08-20 14:54:00
<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>
juandemarco's answer is usually correct, but there is another option here.
Construct an object to your liking:
Use spread for rendering, and you can also choose to pass other props.
Obviously, for some properties, if the value passed to React is not a true value, React will intelligently omit the property. For example:
will get:
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 .