Question

我想准备我的组件以从后端接收JSON对象。所以在我的主要部分中，我有一个州：

constructor(props) {
    super(props);
    this.state = {
       contributions : {
         [
          {
            name: 'Test',
            value: '1',
          },
          {
            name: 'Test2',
            value: '12',
          },
         ]
    }

render() {
    const { contributions } = this.state;
    return (
         <MyComponent contributions={contributions} />        
    );
  }

所以现在，我想知道在MyComponent中渲染我的对象的最佳解决方案，以便我可以输出：

<div>
   <span class="name">Test</span>
   <span class="value">1</span>
</div>
<div>
   <span class="name">Test2</span>
   <span class="value">12</span>
</div>

Answer 1

JSON对象是键值对。因此，如果您将JSON保存到您的州，它可能看起来像

this.state = {
   contributions : {
     "nameValuePairs":[
      {
        "name": 'Test',
        "value": '1',
      },
      {
        "name": 'Test2',
        "value": '12',
      },
     ]
}

现在要通过对象进行映射，你可以做类似的事情 {this.state.contributions.nameValuePairs.map((item)=>(<TestChild item={item}/>))

基本上你的父母看起来像

import React, { Component } from 'react';
import TestChild from './TestChild'
class Test extends Component {
  constructor(props) {
      super(props);
      this.state = {
         contributions : {
           "nameValuePairs":[
            {
              "name": 'Test',
              "value": '1',
            },
            {
              "name": 'Test2',
              "value": '12',
            },
           ]
      }
      }
    }
    render() {
      return (
        <div>
          {this.state.contributions.nameValuePairs.map((item)=>(<TestChild item={item}/>))}
        </div>
      );
    }
}

export default Test;

并且您的子组件可以包含在内部，例如

render () {
 return (
   <div>{this.props.item.name}</div>
   <div>{this.props.item.value}</div>
 )
}

Answer 2

MyComponent的

<div>
   <span class="name">{this.props.name}</span>
   <span class="value">{this.props.value}</span>
</div>

为父级

constructor(props) {
    super(props);
    this.state = {
       contributions : {
         [
          {
            name: 'Test',
            value: '1',
          },
          {
            name: 'Test2',
            value: '12',
          },
         ]
    }

render() {
    const { contributions } = this.state;
    return (
        contributions && contributions.length && contributions.map(contrib => (
            <MyComponent {...contrib) />        
        ))
    );
  }

React：将虚拟内容放入组件的最佳方法

2 个答案: