Javascript 如何在React js中插入json数据？

我有以下数据列表。我需要插入我的模板。如何用React js实现这一点

[
 {
  product:"one",
  quantiy:2
 },
 {
  product:"two",
  quantiy:4
 },
 {
  product:"three",
  quantiy:3
 }
]

---

将其作为属性传递给组件，您可以使用render方法中的this.props.data访问它

例：

var数据=[…]
，

这里是一个工作的jsbin示例

更新：显示所有项目

以下是工作代码：

var数据=[
{
产品:"一",，
数量：2
},
{
产品:"两个",，
数量：4
},
{
产品:"三",，
数量：3
}
];
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此。状态={
数据：数据
}
}
render（）{
返回(
标题
{this.state.data.map（项=>(
{item.product}
))}
);
}
};
ReactDOM.render(
,
document.getElementById（'box'））
);

Hi@Bijeshp009。你能给我举个提琴的例子吗？看看这是一个简单的方法：如何显示所有的数据？谢谢你，所以mach@andrei。这就是我想要的。如果是多维数组的意思，代码结构将是什么？@Sathya取决于数据的意思。但本质上是一样的，只是map函数会变得更复杂（现在.map函数中的一个元素意味着一行，因此需要进行更多的处理）。继续这个想法，也许您希望在map函数中有一些您执行

返回的操作

，以便将渲染传递给子对象。

var data = [
 {
   product:"one",
   quantiy:2
 },
 {
   product:"two",
   quantiy:4
  },
 {
  product:"three",
  quantiy:3
 }
];

class App extends React.Component {

 constructor(props){
  super(props);
   this.state= {
    data: data
   }
  }

render() {
  return (
    <div>
      <h1>Heading</h1>
      <div>{this.state.data.map( item => (
       <li>{item.product}</li>
       ))}
      </div>
     </div>
    );
  }
};

ReactDOM.render(
 <App />,
 document.getElementById('box')
);