Question

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

{{1}}

Answer 1

这是一个有效的jsbin示例http://jsbin.com/ziqelujevi/2/edit?html,js,output

更新：显示所有项目http://jsbin.com/cibuhogudu/1/edit?html,js,console,output

Answer 2

以下是工作代码：http://jsbin.com/wafemul/edit?html,js,output

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

Answer 3

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

例如：

＆＃13;

var data  =  [....]
<SampleComponent data={data} />,

＆＃13;

或使用州传递数据

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

3 个答案: