ReactJS 中的动态属性

Question

我想动态 include/omit 按钮元素上的禁用属性。我见过很多动态属性值的例子，但不是属性本身。我有以下渲染功能：

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

由于“{”字符，这将引发解析错误。我如何 include/omit 基于 AppStore.cartIsEmpty() 的（布尔）结果的禁用属性？

Answer 1

这可行，禁用的问题是不能简单地为其设置布尔值。

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

Answer 2

您可以将布尔值传递给 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>

Answer 3

添加可选属性（包括 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，答案很有效。

Answer 4

更简洁的处理动态属性的方法适用于任何属性

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

提示：

你可以在一个普通的 place/utilities 和导入它以在所有组件中使用它
您可以将值作为 null 传递以不呈现动态属性

Answer 5

您可以在文档中找到与此类似的内容。

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，但我觉得你明白了。

这很酷，因为您可以将许多其他属性传递给此组件，它仍然可以工作。

Answer 6

我正在使用 React 16，这对我有用（bool 是您的测试）：

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

基本上，根据测试 (bool)，您 return 一个对象是否具有条件属性。

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

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

对于更精细的属性管理，我建议您使用（或不使用）JSX 之外的属性预制对象。

Answer 7

我使用的版本是：

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

Answer 8

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

简单地说，HTML属性有一个名称和一个值。作为 shorthand，您只能将名称用于 "disabled"、"multiple" 等。但普通版本仍然有效，并允许 React 以其首选方式工作。

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

Answer 9

一种简单干净的方法

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

disabled应该来自这样的道具

<MyComponent disabled />

Answer 10

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

<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>

如您所见，我使用的是禁用属性并且在大括号中它可以是本地 variable/state 变量。变量 disable 包含值 true/false.

ReactJS 中的动态属性

Dynamic attribute in ReactJS

reactjs