我想在按钮元素上动态包含/省略 disabled 属性。我见过很多动态属性值的例子，但不是属性本身。我有以下渲染功能：
render: function() {
var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
return <button {maybeDisabled}>Clear cart</button>
}
由于“{”字符，这会引发解析错误。如何根据 AppStore.cartIsEmpty() 的（布尔）结果包含/省略 disabled 属性？
【问题讨论】：
标签： reactjs
这可行，禁用的问题是不能简单地为其设置布尔值。
if(AppStore.cartIsEmpty()){
return "<button disabled>Clear cart</button>"
}
else
{
return "<button>Clear cart</button>"
}
【讨论】：
您可以将布尔值传递给disabled 属性。
render: function() {
return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}
function Test() {
return (
<div>
<button disabled={false}>Clear cart</button>
<button disabled={true}>Clear cart</button>
</div>
);
}
ReactDOM.render(<Test />, document.querySelector("#test-container"));
console.log(Array.from(document.querySelectorAll("button")));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="test-container"></div>【讨论】：
disabled 属性 jsfiddle.net/kb3gN/10379
目前添加可选属性（包括disabled 和您可能想要使用的其他属性）的最简洁方法是使用JSX spread attributes：
var Hello = React.createClass({
render: function() {
var opts = {};
if (this.props.disabled) {
opts['disabled'] = 'disabled';
}
return <button {...opts}>Hello {this.props.name}</button>;
}
});
React.render((<div><Hello name="Disabled" disabled='true' />
<Hello name="Enabled" />
</div>)
, document.getElementById('container'));
通过使用扩展属性，您可以使用 javascript 对象实例动态添加（或覆盖）您想要的任何属性。在我上面的示例中，当disabled 属性传递给Hello 组件实例时，代码创建了一个disabled 键（在本例中为disabled 值）。
如果您只想使用disabled，this 答案效果很好。
【讨论】：
a[disabled] { pointer-events: none; } 将停止对元素/组件的操作
更简洁的处理任何属性的动态属性的方法是
function dynamicAttributes(attribute, value){
var opts = {};
if(typeof value !== 'undefined' && value !== null) {
opts['"'+attribute+'"'] = value;
return opts;
}
return false;
};
像下面这样调用你的反应组件
<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />
提示：
您可以在公共位置/实用程序中使用 dynamicAttributes 函数，并且
导入它以在所有组件中使用它
您可以将值传递为null 以不呈现动态属性
【讨论】：
您可以在文档中找到与此类似的内容。
https://facebook.github.io/react/docs/transferring-props.html
你的情况可能是这样的
function MyComponent(props) {
let { disabled, ...attrs } = props;
if (disabled) {
// thus, it will has the disabled attribute only if it
// is disabled
attrs = {
...attrs,
disabled: true
}
};
return (
<button {...attrs}>MyLabel</button>
)
}
这段代码使用的是 ES6，但我想你明白了。
这很酷，因为您可以将许多其他属性传递给该组件，它仍然可以工作。
【讨论】：
我正在使用 React 16，这对我有用（bool 是你的测试）：
<fieldset {...(bool && {disabled:true})}>
基本上，根据测试 (bool)，您返回一个带有条件属性的对象，或者您不返回。
另外，如果您需要添加或省略多个属性，您可以这样做：
<fieldset {...(bool && {disabled:true, something:'123'})}>
对于更精细的属性管理，我建议你在 JSX 之外预制带有（或不带有）属性的对象。
【讨论】：
我使用的版本是：
<button disabled={disabled ? 'disabled' : undefined}>
Click me (or dont)
</button>
【讨论】：
AnilRedshift 提到的解决方案比公认的解决方案干净得多，但我将对其进行扩展。
简单地说，HTML 属性有一个名称和一个值。作为简写，您只能将名称用于“禁用”、“多个”等。但简写版本仍然有效，并允许 React 以它的首选方式工作。
disabled={disabled ? 'disabled' : undefined} 是最清晰的解决方案。
【讨论】：
一种简单而干净的方法
<button {...disabled && {disabled: true}}>Clear cart</button>
disabled 应该来自这样的道具
<MyComponent disabled />
【讨论】：
首先你可以简单地检查一下
<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>
注意：**disabled 值不是String，应该是Boolean。
现在是动态的。你可以简单地写
<button type="button" disabled={disable}
onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>
如您所见，我使用的是禁用属性，并且在大括号中它可以是局部变量/状态变量。
变量 disable 包含值 true/false。
【讨论】：