在ReactJS中渲染数据
Render data in ReactJS
我正在尝试学习ReactJS。在这个HelloWorld脚本
<!DOCTYPE html>
<html>
<head>
<title>React JS Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var data=[{name: "nthhtn", text: "Sample text"}];
var DataBlock = React.createClass({
render: function() {
var entry=this.props.data.map(function (entry){
return (
<h3 name={entry.name}>
{entry.text}
</h3>
);
});
return (
<div className="data" data={this.props.data}>
<h1>Sample data block</h1>
{entry}
</div>
);
}
});
React.render(
<DataBlock data={data}/>,
document.getElementById('content')
);
</script>
</body>
</html>
我不知道为什么当我在浏览器中运行脚本时,data
中的name
字段不显示,只有text
字段
您将数据传递给getInitialState()检查此fiddle https://jsfiddle.net/bs65w2hs/
var data=[{name: "nthhtn", text: "Sample text"}];
var DataBlock = React.createClass({
getInitialState: function getInitialState() {
return {
reactdata: data[0]
};
},
render: function() {
var entrydata = this.state
return <div>
<ul>
<li>name: {entrydata.reactdata.name}</li>
<li>text: {entrydata.reactdata.text}</li>
</ul>
</div>
}
});
React.render(<DataBlock />, document.getElementById('container'));
这是因为你在使用相同的变量名"entry"
render: function() {
var entryBlock=this.props.data.map(function (entry){
return (
<h3 name={entry.name}>
{entry.text}
</h3>
);
});
return (
<div className="data" data={this.props.data}>
<h1>Sample data block</h1>
{entryBlock}
</div>
);
}
例如,将条目更改为entryBlock(参见上面的代码)。如果不是,检查entry.text.
中是否有内容希望能有所帮助。
相关文章:
- 如何在ReactJs中显示Json数据
- 将IndexedDB中的数据拉入数组,并通过ReactJS输出
- 如何在ReactJs中渲染子组件时重新加载子组件的数据
- 在reactjs组件中预加载数据
- 使用ReactJS和Flux架构从服务器获取数据的正确方法是什么
- 将数据传回父组件的ReactJS组件无法工作
- 根据location.hash传递的数据重新呈现ReactJS嵌套的子组件
- ReactJS - 输入组件数据传递
- ReactJS加载有状态数据,优化
- 作为 props 传递的数据不会显示在 django 和 reactjs 中
- ReactJs 聚合来自组件的数据
- ReactJS:将数据附加到 a-z 字母列表
- 使用reactjs、localStorage和state(遍历)以模式显示表中的数据
- ReactJs向屏幕提交表单数据
- 服务器上的Reactjs和数据
- 在ReactJS中渲染数据
- ReactJS:如何在获取数据后渲染组件
- 初始数据加载ReactJS
- 在ReactJS中使用反向数据流进行子父通信的好方法是什么?
- 从异步服务器端数据调用呈现ReactJS