ReactJS中的动态属性

reactjs React.js

Sam猿泡芙

2020-03-12

我想动态地在按钮元素上包含/忽略Disabled属性。我已经看到了许多有关动态属性值的示例，但没有看到属性本身的示例。我有以下渲染功能：

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

由于出现了“ {”字符，因此引发了解析错误。如何基于AppStore.cartIsEmpty（）的（布尔值）结果包含/忽略禁用的属性？

第1296篇《ReactJS中的动态属性》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
梅老丝 2020.03.12

一种简单而干净的方法 

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

残疾人应该来自这样的道具

<MyComponent disabled />
Pro斯丁 2020.03.12

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

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

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

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

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

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

这很酷，因为您可以将许多其他属性传递给此组件，并且该组件仍然可以使用。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android