Question

我开始学习reactjs。我喜欢编写react组件，它将从配置文件读取输入并在运行时生成HTML DOM。

config.json

{
  "select": {name: "cars", option: ["volvo", "audi"], style: "select2" }
}

react组件应返回以下输出

   <select name="cars" style="select2">
     <option value="volvo">Volvo</option>
     <option value="audi">Audi</option>
   </select>

任何建议提前致谢

Answer 1

这应该适合你：

var config = require('./pathtoconfig');

var ComponentName = React.createClass({
    render() {

     var ops = config.select.option.map(function(o) {
        return <option value={o}>{o}</option>
     });

     var htmlEls = <div>
        <select name={config.select.name}>
            {ops}
        </select>
     </div>

     return (
        <div>{htmlEls}</div>
     );
    }
})

Answer 2

在此处进行粘贴，因为编辑需要同行评审才能显示...

var config = require('./pathtoconfig');

var ComponentName = React.createClass({
    render() {

     var ops = config.select.option.map(function(o) {
        return <option value={o}>{o}</option>
     });

     var htmlEls = <div>
        <select name={config.select.name} style={config.select.style}>
            {ops}
        </select>
     </div>

     return (
        {htmlEls}
     );
    }
})

Answer 3

您必须检查重复的数据，就像在角度中一样。考虑到这一点，您还应该传递您的状态或道具以在组件中使用 - 这取决于您设置的任何操作模型和控制器后面的反应。所以考虑到这一点，你可以这样做：

请参阅小提琴：http://jsfiddle.net/kb3gN/13261/

var Hello = React.createClass({
render: function() {
     var ops = this.props.config.select.option.map(function(o) {
    return <option value={o}>{o}</option>
 })

 var htmlEls = <div>
    <select name="cars">
        {ops}
    </select>
 </div>
    return <div>{htmlEls}</div>;
}
});

var config = {
 "select": {name: "cars", option: ["volvo", "audi"], style: "select2" }
};

React.render(<Hello config={this.config} />, document.body);

注意，我正在传递我刚刚设置到hello组件的config var，这是我可以在当前组件道具上使用它，比如this.props.config。我建议查看一些有关状态和道具如何使用以及在反应组件中工作的教程。

就像在角度ng-repeat中一样，你必须知道你要重复使用的对象的级别，所以在你的情况下它是{{1} }}

如何编写反应组件来构建HTML DOM

3 个答案: