Javascript 在ReactJS中呈现数据_Javascript_Reactjs_Components_React Jsx

Javascript 在ReactJS中呈现数据

javascript reactjs

Javascript 在ReactJS中呈现数据,javascript,reactjs,components,react-jsx,Javascript,Reactjs,Components,React Jsx,我正在努力学习英语。在这个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

我正在努力学习英语。在这个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>


你好，世界
var data=[{name:“nthtn”，text:“Sample text”}]；
var-DataBlock=React.createClass({
render:function（）{
var entry=this.props.data.map（函数（条目）{
返回(
{entry.text}
);
});
返回(
样本数据块
{entry}
);
}
});
反应(
,
document.getElementById（'content'）
);

我不知道为什么当我在浏览器中运行脚本时，

数据

中的

名称

字段不显示，只有

文本

字段是

这是因为您使用相同的变量名“条目”来混合内容

render:function（）{
var entryBlock=this.props.data.map（函数（条目）{
返回(
{entry.text}
);
});
返回(
样本数据块
{entryBlock}
);
}

例如，将条目更改为entryBlock（参见上面的代码）。如果不是那样，请检查entry.text中是否有内容

希望有帮助。

您将数据传递给getInitialState（）检查此小提琴

var data=[{name:“nthtn”，text:“Sample text”}]；
var-DataBlock=React.createClass({
getInitialState:函数getInitialState（）{
返回{
reactdata:数据[0]
};
},
render:function（）{
var entrydata=this.state
返回

名称：{entrydata.reactdata.name}
text:{entrydata.reactdata.text}

}
});
React.render（，document.getElementById（'container'）；

对不起，我打错了问题。它仍然不起作用。显示

文本

，但

名称

无效。您是否更改了我的建议？h3的名称属性中有什么？未定义？我发布了所有源代码，如果我这样写，它们将显示

{entry.name}{entry.text}

谢谢。我认为这是对html的错误理解。我以为您想将h3 div prop name设置为entry.name

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

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