在 React.js 中有条件地设置 html 属性

Question

我在为 React 中的单选按钮组件设置默认选项时出奇地困难。

这是我的 RadioToggle 组件：

/** @jsx React.DOM */
var RadioToggle = React.createClass({
  render: function () {
    var self = this;
    return (
      <div className="RadioToggle">
        {this.props.radioset.radios.map(function(radio, i){
          return (
            <label className="__option" key={i}>
              <h3 className="__header">{radio.label}</h3>

              {radio.checked ?
                <input className="__input"
                     type="radio"
                     name={self.props.radioset.name}
                     value={radio.value}
                     defaultChecked />

              : <input className="__input"
                     type="radio"
                     name={self.props.radioset.name}
                     value={radio.value} />
              }

              <span className="__label"></span>
            </label>
            )
          })
        }
      </div>
    );
  }
});

module.exports = RadioToggle;

下面是我创建组件的方式：

<RadioToggle radioset={
  {
    name: "permission_level",
    radios: [
    {
      label: "Parent",
      value: 1,
      checked: false
    },
    {
      label: "Child",
      value: 0,
      checked: true
    }
  ]}
}/>

以上代码有效，但我们不喜欢根据 radio.checked 选项生成几乎相同的代码。

组件的设置方式，我将一个名称和一个要创建的无线电数组传递给它，然后为无线电数组中的每个对象使用该数据创建一个单选按钮。

在其他情况下，我可以通过将三元语句作为值来有条件地设置属性，如下所示，但这在此处不起作用。

defaultChecked={radio.checked ? "checked" : ""} 的问题在于，即使一个单选按钮的输出变为 checked="checked" 而另一个单选按钮的输出变为 checked，它也会默认选中两个单选按钮，从而导致最后一个实际上正在检查。

同样，上面的组件可以工作，但我希望对 React 有更多经验的人会有一种更简洁的方法来完成它，而不是生成除了该属性之外几乎相同的元素。

Answer 1

checked/defaultChecked 采用布尔值，而不是字符串。

<input className="__input"
     type="radio"
     name={self.props.radioset.name}
     value={radio.value}
     defaultChecked={radio.checked} />

jsbin demo

旁注：避免 defaultChecked/defaultValue 并改用 checked/value 和 onChange。

在 React.js 中有条件地设置 html 属性

Conditionally setting html attributes in React.js

javascript

radio-button

reactjs