协慌网

如果满足特定条件，是否有办法仅将属性添加到 React 组件？

我应该在渲染后基于 Ajax 调用将 required 和 readOnly 属性添加到表单元素中，但是由于 readOnly =“false” 与完全省略该属性不同，因此我看不到如何解决此问题。

下面的示例应该解释我想要的内容，但是它不起作用（解析错误：意外的标识符）。

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

显然，对于某些属性，如果您传递给它的值不真实，React 足够聪明，可以忽略该属性。例如：

const InputComponent = function() {
    const required = true;
    const disabled = false;

    return (
        <input type="text" disabled={disabled} required={required} />
    );
}

将导致：

<input type="text" required>

更新：如果有人对这种情况的发生方式 / 原因感到好奇，可以在 ReactDOM 的源代码中找到详细信息，特别是在DOMProperty.js文件的第 30和167 行。

juandemarco 的答案通常是正确的，但这是另一种选择。

随心所欲地建立物件：

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

以传播方式渲染，也可以选择通过其他道具。

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

这是通过React-Bootstrap （版本 0.32.4）使用 Bootstrap的Button

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

根据条件，将返回{bsStyle: 'success'}或{}然后，散布运算符会将散布的返回对象的属性散布到Button组件。在虚假情况下，由于返回的对象上不存在任何属性，因此不会将任何内容传递给组件。

根据安迪 · 波希尔（Andy Polhill）的评论的另一种方法：

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

唯一的小不同是，在第二个示例中，内部组件<Button/>的props对象将具有值为 b 的bsStyle undefined 。