我试图在加载页面时呈现文本数组:
'values': ['hello', 'world']
但它给我一个错误。在我的 formatoc.js 中，我有:
var props = {
'name' : 'form',
'timer' : 1500,
'callback' : function(id, validity, value) {console.log(id, validity, value);},
'values': ['hello', 'world'],
'newParent' : new FormatOC.Parent({
"one": {"__array__":"unique", "__type__":"string","__minimum__":1,"__maximum__":200,"__component__":"Input"}
})
}
React.render(React.createElement(ParentComponent, props), document.getElementById('react-component'));
这是我的 Parent.jsx 文件中的内容:
define(['react', 'r_foc_node'], 函数(React, NodeComponent) {
var ParentComponent = React.createClass({
getInitialState: function() {
if(!this.props.newParent) {
throw "ParentComponent requires newParent property";
}
return {
"values": {}
}
},
recursive : function(level) {
that = this;
console.log(level);
for (keys in level) {
console.log("This is a key: ", keys);
if ((typeof level[keys]) === "object") {
if (level[keys].constructor.name === "Parent") {
console.log('I am a parent');
level = level[keys].details();
//console.log(level[keys].get([key_list[0]]));
this.recursive(level);
//console.log(level[keys].keys());
} else {
console.log('I am a node');
//console.log(level[keys]);
};
};
}
},
childChange: function(name, valid, value) {
this.state.values[name] = value;
this.setState(this.state);
console.log(name,value);
// Call parent callback
this.props.callback(
this.props.name,
this.props.newParent.valid(this.state.values),
this.state.values
);
},
render: function() {
var that = this;
var level = this.props;
return (
<div id = "form">
{level.newParent.keys().map(function(k) {
return (
<div>
{(level.newParent.get(k).constructor.name === "Parent") ?
<ParentComponent
name={k}
key={k}
timer={that.props.timer}
callback={that.childChange}
values={that.props.values[k]}
newParent={that.props.newParent.get(k)}
/>
:
<NodeComponent
name={k}
key={that.props.name + '.' + k}
timer={that.props.timer}
callback={that.childChange}
values={that.props.values[k]}
newNode={that.props.newParent.get(k)}
/>
}
</div>
)
})
}
</div>
)
}
我不确定错误是否是因为我试图访问数组值的方式？但是我似乎无法渲染 hello 和 world 这两个词。
最佳答案
您正在使用:level.newParent.keys().map(function(k) {...
这应该是:level.values.map(function(k) {...
关于javascript - 如何在 React 中渲染组件数组(字符串)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50298524/