javascript 在 React.js 中有条件地设置 html 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27750864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conditionally setting html attributes in React.js
提问by Adam Bickford
I'm having a surprisingly hard time setting a default option for a radio button component in React.
我在 React 中为单选按钮组件设置默认选项时遇到了令人惊讶的困难。
Here is my RadioTogglecomponent:
这是我的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;
And here is how I'm creating the component:
这是我创建组件的方式：
<RadioToggle radioset={
{
name: "permission_level",
radios: [
{
label: "Parent",
value: 1,
checked: false
},
{
label: "Child",
value: 0,
checked: true
}
]}
}/>
The above code works, but we don't like generating almost identical code depending on the radio.checkedoption.
上面的代码有效，但我们不喜欢根据radio.checked选项生成几乎相同的代码。
The way the component is set up, I pass it a name and an array of radios to create, and for each object in the radios array use that data to create a radio button.
按照组件的设置方式，我向它传递了一个名称和要创建的无线电数组，并且对于无线电数组中的每个对象，使用该数据创建一个单选按钮。
In other cases I've been able to conditionally set attributes by putting ternary statements as the value, like below, but that doesn't work here.
在其他情况下，我已经能够通过将三元语句作为值来有条件地设置属性，如下所示，但这在这里不起作用。
The problem with defaultChecked={radio.checked ? "checked" : ""}is that even with the output becoming checked="checked"on one radio button and checkedon the other, it makes both radio buttons checked by default, resulting in the last one actuallybeing checked.
问题defaultChecked={radio.checked ? "checked" : ""}在于，即使输出变成checked="checked"一个单选按钮和另一个单选按钮checked，它也会默认选中两个单选按钮，导致实际选中最后一个。
Again, the component above works, but I'm hoping someone with some more experience with React will have a cleaner way of doing it rather than generating almost identical elements except for that attribute.
同样，上面的组件可以工作，但我希望对 React 有更多经验的人会有一种更简洁的方法来完成它，而不是生成除该属性之外几乎相同的元素。
回答by Brigand
checked/defaultChecked take booleans, not strings.
检查/默认检查采用布尔值，而不是字符串。
<input className="__input"
type="radio"
name={self.props.radioset.name}
value={radio.value}
defaultChecked={radio.checked} />
Side note: avoid defaultChecked/defaultValue and use checked/value with onChange instead.
旁注：避免使用 defaultChecked/defaultValue 并使用带有 onChange 的checked/value。
