是否有一种方法只在满足特定条件时才向React组件添加属性?
我应该添加必需的和readOnly属性，以形成基于Ajax调用后呈现的元素，但我不知道如何解决这个问题，因为readOnly="false"并不等同于完全省略属性。
下面的例子应该解释我想要什么，但它不起作用。
(解析错误:意外的标识符)
function MyInput({isRequired}) {
return <input classname="foo" {isRequired ? "required" : ""} />
}
当前回答
胡德马科的答案通常是正确的，但这里有另一种选择。
创建一个你喜欢的对象:
var inputProps = {
value: 'foo',
onChange: this.handleChange
};
if (condition) {
inputProps.disabled = true;
}
渲染与蔓延，可选的传递其他道具也。
<input
value="this is overridden by inputProps"
{...inputProps}
onChange={overridesInputProps}
/>
其他回答
您可以使用相同的快捷方式，用于添加/删除组件({isVisible && <SomeComponent />})的(部分)。
class MyComponent extends React.Component {
render() {
return (
<div someAttribute={someCondition && someValue} />
);
}
}
<Button {...(isWeb3Enabled ? {} : { isExternal: true })}>
Metamask
</Button>
例如，为自定义容器使用属性样式
const DriverSelector = props => {
const Container = props.container;
const otherProps = {
...( props.containerStyles && { style: props.containerStyles } )
};
return (
<Container {...otherProps} >
下面是一个通过React-Bootstrap(0.32.4版本)使用Bootstrap按钮的例子:
var condition = true;
return (
<Button {...(condition ? {bsStyle: 'success'} : {})} />
);
根据条件，将返回{bsStyle: 'success'}或{}。然后，扩展操作符将返回对象的属性扩展到Button组件。在falsy情况下，由于返回的对象上不存在任何属性，因此不会向组件传递任何内容。
另一种基于Andy Polhill评论的方法是:
var condition = true;
return (
<Button bsStyle={condition ? 'success' : undefined} />
);
唯一的小区别是，在第二个例子中，内部组件<Button/>的props对象将有一个值为undefined的键bsStyle。
你可以在你的渲染方法(如果使用类)或返回语句(如果使用函数组件)中执行以下操作:
<MyComponent required={isRequired ? 'true' : undefined} />
在这种情况下，如果isRequired为undefined、false或null(这与添加属性但将其设置为'false'不同)，则属性将不会被添加。还要注意，我使用字符串而不是布尔值，以避免来自react的警告消息(在非布尔属性上接收布尔值)。
