ReactJS 中的动态属性

我想在按钮元素上动态包含/省略禁用的属性。我已经看到了许多动态属性值的例子，但是没有看到属性本身的例子。我有以下渲染功能:

render: function() {
var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
return <button {maybeDisabled}>Clear cart</button>
}

This throws a parse error because of the "{" character. How can I include/omit the disabled attribute based on the (boolean) result of AppStore.cartIsEmpty()?

104088 次浏览
小开

这可以工作，问题与禁用是一个不能简单地设置布尔值为它。

if(AppStore.cartIsEmpty()){
return "<button disabled>Clear cart</button>"
}
else
{
return "<button>Clear cart</button>"
}
小开

You can pass a boolean to the disabled attribute.

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和您可能想要使用的其他属性)的最干净的方法是当前使用 JSX 传播属性:

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，但是，这个答案工程良好。

小开

对任何属性都有效的更简洁的动态属性处理方法是

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)} />

小贴士:

  1. 你可以在一个公共场所/实用程序中使用 dynamicAttributes函数 导入它以便在所有组件

    2. 中使用它

  2. 可以将值作为 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>
)
}

This code is using ES6, but I thing you got the idea.

这很酷，因为您可以向这个组件传递许多其他属性，而且它仍然可以工作。

小开

我使用的是 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} is the most legible solution.

小开

一种简单而干净的方法

<button {...disabled && {disabled: true}}>Clear cart</button>

残疾人应该使用这样的道具

<MyComponent disabled />
小开

首先你可以简单地检查一下

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

注意: * * 禁用的值不是 String，应该是 布尔型。

现在是动态，你可以简单地写

<button type="button" disabled={disable}
onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

正如您所看到的，我正在使用禁用属性，并且在大括号中，它可以是局部变量/状态变量。 变量 disable包含 true/false 值。

小开

如果其他人来这里是为了获得 disabled以外的属性，比如像 data-attr这样的自定义属性，那么可以指定空字符串 ""作为要传播的对象中的值，以消除该属性的值。属性名只能在生成的 HTML 中使用。

For example:

<div {...(trueOrFalse && { [`data-attr`]: "" })}></div>

此外，如果您希望属性的名称也是动态的。由于模板字符串支持字符串插值，可以将状态放入其中，使属性的名称是动态的。

<div {...(trueOrFalse && { [`${state}`]: "" })}></div>

提交答案