ReactJS 中的动态属性

Posted 2023-02-16

【中文标题】ReactJS 中的动态属性

【英文标题】：Dynamic attribute in ReactJS

【发布时间】：2015-05-20 02:49:57

【问题描述】：

我想在按钮元素上动态包含/省略 disabled 属性。我见过很多动态属性值的例子，但不是属性本身。我有以下渲染功能：

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

由于“”字符，这会引发解析错误。如何根据 AppStore.cartIsEmpty() 的（布尔）结果包含/省略 disabled 属性？

【参考方案1】：

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

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

else

  return "<button>Clear cart</button>"

【讨论】：

我担心我可能不得不求助于这个.. 在接受您的回答之前，我会等着看其他人是否有任何建议

【参考方案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>

【讨论】：

不，你不能。 disabled 属性的存在会完全禁用按钮。见http://jsfiddle.net/ttjhyvmt/

React 足够聪明，可以根据您传递的值在结果 html 上有条件地设置 disabled 属性 jsfiddle.net/kb3gN/10379

不知道我是怎么错过的，谢谢！虽然这适用于我的具体情况，但我接受了另一个省略/包含属性的答案

IE11 有问题，但是，我们没有使用最新的反应。 JSX 传播属性答案有效。

【参考方案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，this 答案效果很好。

【讨论】：

一旦到位，CSS 像：a[disabled] pointer-events: none; 将停止对元素/组件的操作

【参考方案4】：

更简洁的处理任何属性的动态属性的方法是

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 以不呈现动态属性

【讨论】：

为什么不这样做： ？它更简单，不需要“动态属性”

如果属性为空，我们不想响应渲染该属性。示例：“data-modal”：null 我们不想做出反应以显示 data-model="null"。在这种情况下，我上面的代码甚至不会显示属性，即基于值的动态属性。

【参考方案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，但我想你明白了。

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

【参考方案6】：

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

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

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

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

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

对于更精细的属性管理，我建议你在 JSX 之外预制带有（或不带有）属性的对象。

【讨论】：

感谢这个简单但很有帮助的答案！

【参考方案7】：

我使用的版本是：

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

【讨论】：

在代码中使用 undefined 是一种不好的做法。这也是不必要的，因为您可以简单地编写 因为 disabled 是一个布尔变量而不是返回 true 或 false

为什么未定义的坏习惯？如果可能，请引用。现在也可能反应正确处理布尔值，但在撰写本文时，您的建议将无法正常工作

【参考方案8】：

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

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

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

【参考方案9】：

一种简单而干净的方法

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

disabled 应该来自这样的道具

<MyComponent disabled />

【参考方案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>

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