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 } 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
juandemarco's answeris 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.
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 ( ); }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 theDOMProperty.jsfile at page 30 Lines and167 lines.