如何有条件地向React组件添加属性？

Question

有没有办法只在满足某个条件时才向React组件添加属性？

我应该在渲染之后添加必需和readOnly属性以基于ajax调用来形成元素,但是我无法看到如何解决这个问题,因为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" : ""} />
        );
    }
});

Answer 1

显然,对于某些属性,React足够智能,如果传递给它的值不是真的,则省略该属性.例如:

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

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

将导致:

<input type="text" required>

Answer 2

只是抛出另一个选项,但@ juandemarco的回答通常是正确的.

根据自己的喜好构建对象:

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

if (condition) inputProps.disabled = true;

使用传播渲染,也可以选择传递其他道具.

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

Answer 3

下面是使用的示例自举的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对象将具有bsStyle值为的键undefined.

Answer 4

迟到了.这是另一种选择.

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

或者它的内联版本

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

Answer 5

这是我做的一种方式.

有条件的:

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

我仍然喜欢使用常规方式传递道具,因为在没有任何条件的情况下,它更具可读性(在我看来).

无条件:

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

Answer 6

您可以使用相同的快捷方式,用于添加/删除(部分)组件({isVisible && <SomeComponent />}).

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

Answer 7

迟到了.

假设我们想要在条件为真时添加自定义属性(使用aria-*或data-*):

{...this.props.isTrue && {'aria-name' : 'something here'}}

假设我们想要在条件为真时添加样式属性:

{...this.props.isTrue && {style : {color: 'red'}}}

Answer 8

undefined对大多数属性使用作品：

const name = "someName";

return (
    <input name={name ? name : undefined} />
);

Answer 9

如果你使用es6,你可以这样写.

// first, create a wrap object.
const wrap = {
    [variableName]: true
}
// then, use it
<SomeComponent {...{wrap}} />

Answer 10

给定一个局部变量，isRequired您可以在渲染方法（如果使用类）或 return 语句（如果使用函数组件）中执行以下操作：

 <MyComponent required={isRequired ? 'true' : undefined} />

在这种情况下，如果 isRequired 未定义、 false 或 null （这与添加属性但将其设置为 不同），则不会添加该属性。另请'false'注意，我使用字符串而不是布尔值，以避免出现警告消息来自react（在非布尔属性上收到的布尔值）。

Answer 11

这应该起作用，因为在ajax调用之后您的状态将改变，并且父组件将重新呈现。

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>    
    );
}