使用React渲染JSON数据

Question

我正在尝试将此JSON数据呈现为列表。

[{
    "id": "1",
    "name": "Bill"
}, {
    "id": "2",
    "name": "Sarah"
}]

我正在尝试显示数据，以便将数据标题和id作为参数从Parent类传递给Child类，后者将数据作为列表打印。

export default class Parent extends Component {
  render() {
    return (
        <div>
        <Child
          title={"Group 1"}
          options={this.props.data.name}
        />
        </div>
    );
  }
}

这是我的孩子班：

export default class Child extends Component {
  render() {
    var data=this.props;
    var title=this.props.title;
    var name=this.props.name;
    return (
      <ul>
        <h4>{title}</h4>
        <div>{this.props.map(item=>
          <li>{name}</li>
        )}
        </div>
      </ul>
    );
  }
}

我不明白如何在Child类中使用map来显示数据。我知道我不应该写this.props.map(item=>。我是React的新手，非常感谢帮助解决这个问题。

Answer 1

好吧，首先你必须在你的json上使用JSON.parse()，所以它变成了一个javascript对象，你还必须确保你将道具传递给你的孩子。然后，您可以这样映射：

this.props.data.map((item,i) => <li key={i}>{item.name}</li>)

Answer 2

只需将您的数据作为父组件的prop传递，您就可以在子组件中访问它。

＆＃13;

＆＃13;

let {Component} = React;

const data = [{
    "id": "1",
    "name": "Bill"
}, {
    "id": "2",
    "name": "Sarah"
}]

class Child extends Component {
  render() {
   let {data, title} = this.props;
   
    return (
      <ul>
        <h4>{title}</h4>
        <div>{data.map(item=>
          <li key={item.id}>{item.name}</li>
        )}
        </div>
      </ul>
    );
  }
}

class Parent extends Component {
  render() {
    return (
        <div>
          <Child
            title={"Group 1"}
            data={this.props.data}
          />
        </div>
    );
  }
}

ReactDOM.render(
  <Parent data={data} />,
  document.getElementById('app')
);

＆＃13;

<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;

您还可以在父组件内调用map方法，并为数据渲染子组件中的每个元素调用。此外，只有li元素可以是ul的直接子元素。

＆＃13;

＆＃13;

let {Component} = React;
const data = [{"id": "1","name": "Bill"}, {"id": "2","name": "Sarah"}]

class Child extends Component {
  render() {
    let {name} = this.props;
    return <li>{name}</li>
  }
}

class Parent extends Component {
  render() {
    return (
        <div>
          <h1>{"Group 1"}</h1>
          <ul>{this.props.data.map(item => {
                return <Child key={item.id} {...item} />
              })}
          </ul>
        </div>
    );
  }
}

ReactDOM.render(
  <Parent data={data} />,
  document.getElementById('app')
);

＆＃13;

<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;

更新：对于嵌套子项，您可以React.cloneElement动态添加子节点。

＆＃13;

＆＃13;

let {Component} = React;
const data = [{ "id": "1", "name": "Bill" }, { "id": "2", "name": "Sarah", "childnodes": [{ "id": "3", "name": "Some name", "childnodes": [{ "id": "4", "name": "Last" }]}] }]

class Child extends Component {
  render() {
    let {name} = this.props;
    return <li>
      {name}
      {this.props.children ? <ul>{this.props.children}</ul> : ''}
    </li>
  }
}

class Parent extends Component {
  constructor(props) {
    super(props);
    this.renderNodes = this.renderNodes.bind(this);
  }
  
  renderNodes(data) {
    return data.map(item => {
      let child = <Child key={item.id} {...item} />
      
      if(item.childnodes) {
        child = React.cloneElement(child, {
          children: this.renderNodes(item.childnodes)
        })
      }
      
      return child;
    })
  }

  render() {
    return (
        <div>
          <h1>{"Group 1"}</h1>
          <ul>{this.renderNodes(this.props.data)}</ul>
        </div>
    );
  }
}

ReactDOM.render(
  <Parent data={data} />,
  document.getElementById('app')
);

＆＃13;

<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的代码存在一些问题：

1. 您需要将JSON对象从父级传递给子组件。如果它被称为data，那么执行：

   <Child
     title={"Group 1"}
     options={this.props.data}
   />
   

   我建议使用data代替options来防止混淆，但这取决于您。此外，您无法传递this.props.data.name，因为this.props.data是一个对象数组。

2. 现在options是一个数组，我们可以正确使用map()。您试图在map()上使用this.props，这是不正确的。所以请尝试：

   <div>
     {this.props.map(item=>
       <li>{item.name}</li>
     )}
   </div>
   

3. 此外，<ul>元素只能将<li>作为直接子元素。您已将<h4>和<div>个元素作为其子元素。而是将它们包裹在<li>元素中。

完整演示：

const data = [
  {
    "id": "1",
    "name": "Bill"
  }, {
    "id": "2",
    "name": "Sarah"
  }
];

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child
          title={"Group 1"}
          options={this.props.data}
        />
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    var title = this.props.title;
    return (
      <div>
        <h4>{title}</h4>
        <ul>
          <li>
            <div>
              {this.props.options.map(item=>
                <li>{item.name}</li>
              )}
            </div>
          </li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<Parent data={data} />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 4

让我们不要在孩子身上使用地图......试试这个：

let data = [{
    "id": "1",
    "name": "Bill"
}, {
    "id": "2",
    "name": "Sarah"
}]

父组件中的

用户map：

export default class Parent extends Component {
  render() {
    return (
        <div>
        <div>Group 1</div>
        <ul>
          {data.map(item => <Child
            options={item}
          />)}
        </ul>
        </div>
    );
  }
}

增强子组件：

export default class Child extends Component {
  render() {
    let {options:{name}} = this.props
    return (
      <li>{name}</li>
    );
  }
}