为什么不会反应类打印json除非道具

Question

我是新手做出反应并试图了解如何将json值打印到dom。

这有效：

var C = React.createClass({
      render: function() {
        return <p>{this.props.data[0].product}</p>
      }
    });

    var data = [
     {
      product:"Hello",
      quantiy:2
     },
     {
      product:"two",
      quantiy:4
     },
     {
      product:"three",
      quantiy:3
     }
    ]
    React.render(<C data={data}/>, document.body);

但是当我尝试这个时它不起作用的原因？

var C = React.createClass({
    var data = [
     {
      product:"Hello",
      quantiy:2
     },
     {
      product:"two",
      quantiy:4
     },
     {
      product:"three",
      quantiy:3
     }
    ]
      render: function() {
        return <p>{this.data[0].product}</p>
      }
    });


    React.render(<C />, document.body);

我创建了一个数组并调用了this.data [0] .product但它不起作用

Answer 1

因为你写了data，但this未声明 var C = React.createClass({ data: [ { product: "Hello", quantiy: 2 }, { product: "two", quantiy: 4 }, { product: "three", quantiy: 3 } ], render: function () { return <p>{this.data[0].product}</p>; } }); 。

试

    var C = React.createClass({
        render: function () {
            var data = [
                {
                    product: "Hello",
                    quantiy: 2
                },
                {
                    product: "two",
                    quantiy: 4
                },
                {
                    product: "three",
                    quantiy: 3
                }
            ];

            return <p>{data[0].product}</p>;
        }
    });

或

{"1":{"name":"11233","po":"121212","po_item_number":"000001","po_item_material_code":"material","po_item_description":"assemble","sales_order":"11000000","sales_order_item":"10","tracable":"sds"},
"2":{"name":"11233","po":"121212","po_item_number":"000001","po_item_material_code":"material","po_item_description":"assemble","sales_order":"11000000","sales_order_item":"10","tracable":"sds"},
"3":{"name":"11233","po":"121212","po_item_number":"000001","po_item_material_code":"material","po_item_description":"assemble","sales_order":"11000000","sales_order_item":"10","tracable":"sds"},
"4":{"name":"11233","po":"121212","po_item_number":"000001","po_item_material_code":"material","po_item_description":"assemble","sales_order":"11000000","sales_order_item":"10","tracable":"sds"},
"5":{"name":"11233","po":"121212","po_item_number":"000001","po_item_material_code":"material","po_item_description":"assemble","sales_order":"11000000","sales_order_item":"10","tracable":"sds"}}

Answer 2

你应该使用州

var Hello = React.createClass({
 getInitialState: function() {
    return {data: [
     {
      product:"Hello",
      quantiy:2
     },
     {
      product:"two",
      quantiy:4
     },
     {
      product:"three",
      quantiy:3
     }
    ]};
  },
  render: function() {
    return <div>{this.state.data[1].product}</div>;
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);