我正在搞乱 react 并尝试解析和呈现一个 json 对象。现在,我只是用一个硬编码的对象来设置它以进行测试,而不是从 ajax 调用中获取它。
<script type="text/jsx">
var Person = React.createClass({
render: function() {
return (
<div>
<p className="personName"></p>
<p className="personSA1"></p>
<p className="personSA2"></p>
<p className="zip"></p>
<p className="state"></p>
<p className="country"></p>
</div>
);
}
});
var PersonDiv = React.createClass({
render: function() {
var personNodes = this.props.data.map(function(personData){
return (
<Person
personName={personData.person.firstname}
personSA1={personData.person.street1}
personSA2={personData.person.street2}
zip={personData.person.zip}
state={personData.person.state}
country={personData.person.country}>
</Person>
)
});
return (
<div>
{personNodes}
</div>
);
}
});
React.render(
<PersonDiv data={data} />,
document.getElementById('jsonData')
);
我正在用
设置数据变量<script>
var data = "[" + '<%=data%>' + "]";
</script>
数据对象是我在 portlet 的 Java 端创建的对象。我知道 json 是有效的,因为我可以使用 JSON.parse(json) 来解析和遍历字符串,但我一直得到 map() 不是函数。
最佳答案
看来你的数据不是一个json对象,而是一个字符串。您可能需要运行 data = JSON.parse(data);
将您的数据转换为实际的 javascript 对象才能使用它。一个简单的测试是运行
<script>
var data = "[" + '<%=data%>' + "]";
console.log(data);
console.log(JSON.parse(data));
</script>
您应该注意到区别。
关于javascript - React.js this.props.data.map() 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28434789/