是否有一种方法只在满足特定条件时才向React组件添加属性?
我应该添加必需的和readOnly属性，以形成基于Ajax调用后呈现的元素，但我不知道如何解决这个问题，因为readOnly="false"并不等同于完全省略属性。
下面的例子应该解释我想要什么，但它不起作用。
(解析错误:意外的标识符)
function MyInput({isRequired}) {
return <input classname="foo" {isRequired ? "required" : ""} />
}
当前回答
例如，为自定义容器使用属性样式
const DriverSelector = props => {
const Container = props.container;
const otherProps = {
...( props.containerStyles && { style: props.containerStyles } )
};
return (
<Container {...otherProps} >
其他回答
显然，对于某些属性，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行。
如果是有限数量的属性，这将做
function MyInput({isRequired}) {
if (isRequired) {
return <input classname="foo" isRequired={isRequired} />
}
return <input classname="foo" />
}
如果您有大量的属性，那么很难为每个属性编写If else条件并相应地返回。为此，您可以将这些属性推入到对象中，并在返回元素中使用展开操作符。
function MyInput({ prop1, prop2, ...propN }) {
const props = {};
if (prop1) props.prop1 = prop1;
.
.
.
if (propN) props.propN = propN;
return <input classname="foo" {...props} />
}
你可以在你的渲染方法(如果使用类)或返回语句(如果使用函数组件)中执行以下操作:
<MyComponent required={isRequired ? 'true' : undefined} />
在这种情况下，如果isRequired为undefined、false或null(这与添加属性但将其设置为'false'不同)，则属性将不会被添加。还要注意，我使用字符串而不是布尔值，以避免来自react的警告消息(在非布尔属性上接收布尔值)。
在React中，我们将值作为Props从父组件传递给子组件。如果值为false，则不会将其作为道具传递。在某些情况下，我们也可以使用三元(条件运算符)。
以一种简单的方式
const InputText= ({required = false , disabled = false, ...props}) =>
(<input type="text" disabled={disabled} required={required} {...props} />);
像这样使用它
<InputText required disabled/>
