是否有一种方法只在满足特定条件时才向React组件添加属性?
我应该添加必需的和readOnly属性，以形成基于Ajax调用后呈现的元素，但我不知道如何解决这个问题，因为readOnly="false"并不等同于完全省略属性。
下面的例子应该解释我想要什么，但它不起作用。
(解析错误:意外的标识符)
function MyInput({isRequired}) {
return <input classname="foo" {isRequired ? "required" : ""} />
}
当前回答
如果是有限数量的属性，这将做
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} />
}
其他回答
<Button {...(isWeb3Enabled ? {} : { isExternal: true })}>
Metamask
</Button>
这里有一个替代方案。
var condition = true;
var props = {
value: 'foo',
...(condition && { disabled: true })
};
var component = <div {...props} />;
或者内联版本
var condition = true;
var component = (
<div value="foo" {...(condition && { disabled: true })} />
);
在React中，你可以有条件地呈现组件，还有它们的属性，比如props、className、id等等。
在React中，使用三元运算符是一个很好的实践，它可以帮助你有条件地呈现组件。
一个示例还展示了如何有条件地呈现Component及其样式属性。
这里有一个简单的例子:
class App extends React.Component { state = { isTrue: true }; render() { return ( <div> {this.state.isTrue ? ( <button style={{ color: this.state.isTrue ? "red" : "blue" }}> I am rendered if TRUE </button> ) : ( <button>I am rendered if FALSE</button> )} </div> ); } } ReactDOM.render(<App />, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
当您不需要该属性时，必须将其值设置为未定义 例子:
<a data-tooltip={sidebarCollapsed?'Show details':undefined}></a>
你可以在你的渲染方法(如果使用类)或返回语句(如果使用函数组件)中执行以下操作:
<MyComponent required={isRequired ? 'true' : undefined} />
在这种情况下，如果isRequired为undefined、false或null(这与添加属性但将其设置为'false'不同)，则属性将不会被添加。还要注意，我使用字符串而不是布尔值，以避免来自react的警告消息(在非布尔属性上接收布尔值)。
