gpt4 book ai didi

javascript - 在 ReactJS 中渲染数据

转载 作者:行者123 更新时间:2023-11-30 16:35:19 25 4
gpt4 key购买 nike

我正在尝试学习 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'));

关于javascript - 在 ReactJS 中渲染数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32781061/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com