Angularjs 如何编写react组件来构造htmldom

我开始学英语了。我喜欢编写react组件，它将从配置文件中读取输入，并在运行时生成HTMLDOM

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>

沃尔沃汽车
奥迪

有什么建议吗

---

提前感谢

这应该对您有用：

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>
     );
    }
})

var config=require（'./pathtoconfig'）；
var ComponentName=React.createClass({
render（）{
var ops=config.select.option.map（函数（o）{
返回{o}
});
变量htmlEls=
{ops}
返回(
{htmles}
);
}
})

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

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}
     );
    }
})

var config=require（'./pathtoconfig'）；
var ComponentName=React.createClass({
render（）{
var ops=config.select.option.map（函数（o）{
返回{o}
});
变量htmlEls=
{ops}
返回(
{htmles}
);
}
})

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

参见小提琴：

var Hello=React.createClass({
render:function（）{
var ops=this.props.config.select.option.map（函数（o）{
返回{o}
})
变量htmlEls=
{ops}
返回{htmles}；
}
});
变量配置={
“选择”：{name:“cars”，选项：[“volvo”，“audi”]，样式：“select2”}
};
React.render（，document.body）；

注意，我将刚刚设置的配置变量传递到hello组件上，这样我就可以在当前组件的道具上使用它，比如

this.props.config

。我建议查看一些关于如何使用状态和道具以及如何在react组件中工作的教程

---

就像在angulars

ng repeat

中一样，您必须知道要重复的对象的级别，因此在您的例子中是

this.props.config.select.option

纳德，谢谢您的回复，我无法运行此代码。您不需要完整的文件url，查看我在本地设置的数据以供参考：请参阅下面我的JSFIDLE链接查看我的答案。

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);