如何在React中渲染选中的单选按钮

Question

我找到了基于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'));

代码是在jsfiddle.com之后设置的https://jsfiddle.net/rexonms/2x7ey2L5/

有没有更好的解决方案来实现这个？ 提前致谢

Answer 1

确实有更好的方法。 在你的render方法中， if语句的两个分支内的JSX是相同的，除了一个已经checked而另一个没有。 像这样的重复可以 - 而且应该 - 几乎总是被清理干净。

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

对于在JSX中checked的布尔属性，可以为它们提供一个truthy或falsy值来控制呈现的HTML元素是否具有该属性。 换句话说，如果你有<input checked={10 > 1}/> ，你将获得<input checked/> 。 如果你有<input checked={10 > 100}/> ，你会得到<input/> 。

考虑到这一点，我们可以将您的代码减少到这样的：

 var App = React.createClass({ getInitialState: function() { return { radios: { radioA: 'Radio A', radioB: 'Radio B', radioC: 'Radio C' }, selected: 'radioA' } }, renderRadioWithLabel: function(key) { var isChecked = key === this.state.selected; return ( <label className="radio-inline" key={key} htmlFor={key}> <input id={key} type="radio" checked={isChecked} value={key} /> {this.state.radios[key]} </label> ); }, render: function() { return ( <div> {Object.keys(this.state.radios).map(function(key) { return this.renderRadioWithLabel(key); }, this)} </div> ); } }); React.render(<App />, document.getElementById('container')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <div id="container"></div> 

正如您所看到的，我已经打破了将单选按钮及其标签呈现为自己的功能的逻辑。 你不必这样做，但我发现它使得内部循环的render函数更容易阅读，并使你的意图更清晰。

包括我自己在内的一些人会主张将这种逻辑分解为自己的组件，这样你就可以拥有一个有状态的容器组件和无状态子组件，这使得整个事情变得更加容易，更容易测试。 这是一篇关于这个主题的好文章。 您可能想要做的另一件事是在数组中创建键和标签列表，因为在JavaScript中无法保证对象属性的顺序。 如果您想知道这些更改可能会是什么样子，请查看以下代码段：

 var Radio = React.createClass({ render: function() { var key = this.props.key; return ( <label className="radio-inline" key={key} htmlFor={key}> <input id={key} type="radio" checked={this.props.selected} value={key} /> {this.props.label} </label> ); } }); var RadiosContainer = React.createClass({ getInitialState: function() { return { selected: this.props.initialSelected }; }, render: function() { return ( <div> {this.props.radios.map(function(radioProps) { var selected = this.state.selected === radioProps.key; return <Radio {...radioProps} selected={selected} />; }, this)} </div> ); } }); var radios = [ { key: 'radioA', label: 'Radio A' }, { key: 'radioB', label: 'Radio B' }, { key: 'radioC', label: 'Radio C' } ]; var selectedRadio = 'radioB'; React.render( <RadiosContainer radios={radios} initialSelected={selectedRadio} />, document.getElementById('container') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <div id="container"></div>