Javascript 如何在React中呈现选中的单选按钮

我提出了一个基于JSON数据的预检查单选按钮解决方案，但我认为代码可以改进。或者应该有更好的方法来实施它。数据结构如下所示：

  {
        radioA: 'Radio A',
        radioB: 'Radio B',
        radioC: 'Radio C',
        selected: 'Radio A'
    }

不确定这是否是最好的方法。如果需要，可以修改数据结构

根据提供的数据，我正在渲染单选按钮，其中一个已预选。以下是我所拥有的

var App = React.createClass({

getInitialState: function(){
    return {
        radioA: 'Radio A',
        radioB: 'Radio B',
        radioC: 'Radio C',
        selected: 'Radio A'
    }
},

render: function(){
    return(
        <div>                
            {Object.keys(this.state).map(function(key) {
                // Not displaying the selected data
                if(key !== 'selected'){

                    // Checked radio button
                    if(this.state[key] == this.state['selected']){
                        return(
                            <div>
                                <label className="radio-inline" key={key} htmlFor={key}>
                                    <input id={key} type="radio" checked value={key} /> {this.state[key]}
                                </label>
                            </div>
                        );
                    }

                    else{
                        return(
                            <div>
                                <label className="radio-inline" key={key} htmlFor={key}>
                                    <input id={key} type="radio" value={key} /> {this.state[key]}
                                </label>
                            </div>
                        );
                    }
                }
            }, this)} 
        </div>
    );
 }
 });

 React.render(<App />, document.getElementById('container'));

var-App=React.createClass({
getInitialState:函数（）{
返回{
收音机A：“收音机A”，
收音机B:‘收音机B’，
无线电通讯：“无线电通讯”，
选定：“A电台”
}
},
render:function（）{
返回(
{Object.keys（this.state）.map（函数（键）{
//不显示所选数据
如果（键！=“已选定”）{
//选中单选按钮
if（this.state[key]==this.state['selected']）{
返回(
{this.state[key]}
);
}
否则{
返回(
{this.state[key]}
);
}
}
}，这个）}
);
}
});
反应(

有更好的解决方案来实现这一点吗？提前感谢
确实有更好的方法。在
render
方法中，
if
语句的两个分支中的JSX是相同的，只是一个分支已选中了
，另一个未选中。这样的重复可以而且应该几乎总是被清除起来

注意：这个答案是用React 0.14编写的。要查看使用更现代的React习惯用法编写的代码，请参阅

对于JSX中选中的
等布尔属性，您可以给它们一个truthy或falsy值来控制呈现的HTML元素是否具有该属性。换句话说，如果您具有
1}/>
，您将获得
。如果具有
100}/>
，您将获得

考虑到这一点，我们可以将您的代码简化为以下内容：


var-App=React.createClass({
getInitialState:函数（）{
返回{
无线电：{
收音机A：“收音机A”，
收音机B:‘收音机B’，
无线电通讯：“无线电通讯”
},
选定：“radioA”
}
},
renderRadioWithLabel:函数（键）{
var isChecked=key==this.state.selected；
返回(
{this.state.radios[key]}
);
},
render:function（）{
返回(
{Object.keys（this.state.radios）.map（function（key）{
返回此.renderRadioWithLabel（键）；
}，这个）}
);
}
});
React.render（，document.getElementById（'container'）；

不幸的是，您在JSFIDLE上的示例不起作用-您无法更改单选按钮。FIDLE按预期工作。要了解为什么您不能更改单选按钮（与OP的问题无关），请阅读React文档中有关受控和非受控组件的内容：