Question

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

2015-07-01

735565

javascript reactjs

有没有办法仅在满足特定条件时才向 React 组件添加属性？

我应该在渲染后根据 Ajax 调用向表单元素添加 required 和 readOnly 属性，但我不知道如何解决这个问题，因为 readOnly="false" 与完全省略属性不同。

下面的例子应该可以解释我想要什么，但它不起作用。

(Parse Error: Unexpected identifier)

function MyInput({isRequired}) {
  return <input classname="foo" {isRequired ? "required" : ""} />
}

Answer 1

显然，对于某些属性，如果传递给它的值不真实，React 会非常智能地省略该属性。例如：

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

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

将导致：

<input type="text" required>

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

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

以下是通过 React-Bootstrap (版本 0.32.4) 使用 Bootstrap 的 Button 的示例：

var condition = true;

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

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

基于 Andy Polhill 的评论的另一种方法：

var condition = true;

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

唯一的细微差别是，在第二个示例中，内部组件 <Button/> 的 props 对象将具有一个键 bsStyle ，其值为 null 。