ReactJS 中的动态属性

IT技术 reactjs
2021-04-16 02:45:46

我想动态地包含/省略按钮元素上的 disabled 属性。我见过很多动态属性值的例子,但没有看到属性本身。我有以下渲染功能:

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

由于“{”字符,这会引发解析错误。如何根据 AppStore.cartIsEmpty() 的(布尔值)结果包含/省略禁用属性?

6个回答

添加可选属性(包括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键(disabled在这种情况下disabled一个值)Hello

如果您只想使用disabled这个答案效果很好。

一旦到位,CSS like:a[disabled] { pointer-events: none; }将停止对元素/组件的操作
2021-06-20 02:45:46

您可以将布尔值传递给disabled属性。

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

你不能。disabled 属性的存在会完全禁用按钮。http://jsfiddle.net/ttjhyvmt/
2021-05-27 02:45:46
React 足够聪明,可以disabled根据您传递的值在结果 HTML 上有条件地设置属性 jsfiddle.net/kb3gN/10379
2021-06-04 02:45:46
IE11 有问题,但是,我们没有使用最新的 react。JSX 传播属性答案有效。
2021-06-04 02:45:46
不知道我是怎么错过的,谢谢!虽然这适用于我的具体情况,但我接受了另一个省略/包含属性的答案
2021-06-08 02:45:46

我正在使用 React 16,这对我有用(bool你的测试在哪里):

<fieldset {...(bool && {disabled:true})}>

基本上,根据测试 ( bool),您返回一个具有条件属性的对象,或者您不返回。

此外,如果您需要添加或省略多个属性,您可以这样做:

<fieldset {...(bool && {disabled:true, something:'123'})}>

对于更详细的属性管理,我建议您使用(或不使用)JSX 之外的属性预制对象。

感谢您提供的简单但非常有用的答案!
2021-05-28 02:45:46

AnilRedshift 提到的解决方案比公认的解决方案要干净得多,但我将对其进行扩展。

简单地说,HTML 属性有一个名称和一个值。作为简写,您只能将名称用于“禁用”、“多个”等。但是简写版本仍然有效,并且允许 React 以其首选方式工作。

disabled={disabled ? 'disabled' : undefined} 是最清晰的解决方案。

处理适用于任何属性的动态属性的更清晰的方法是

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

调用您的react组件,如下所示

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

尖端 :

  1. 您可以dynamicAttributes在公共位置/实用程序中使用功能并将其导入以在所有组件中使用它

  2. 您可以传递值null以不呈现动态属性

为什么不这样做: <ReactComponent {...{ "data-url": dataURL }} /> ?它更简单,不需要“dynamicAttributes”
2021-06-12 02:45:46
如果属性为空,我们不希望响应渲染该属性。示例:"data-modal": null 我们不想反应显示 data-model="null"。在这种情况下,我上面的代码甚至不会显示属性,即基于值的动态属性。
2021-06-20 02:45:46