javascript - React JS - 如何使用组件显示数据集？

Question

在 ContactList 组件中，我无法初始化为 Contact 元素数组并显示数据集:

  import React from 'react';      
  var ContactForm = React.createClass({
            render: function(){
              return (
                <tr>
                  <td>
                  <input type="text" className="form-control" />
                  </td>
                  <td>
                  <input type="text" className="form-control"/>
                  </td>
                  <td>
                  <input type="text" className="form-control" />
                  </td>
                  <td>
                  <input type="button" className="btn btn-primary" value="Add"/>
                  </td>
                </tr>
                )
            }
          });    
        var Contact = React.createClass({
              render: function(){
                  return (
                          <tr >
                             {this.props.contact.name}
                             {this.props.contact.address}
                             {this.props.contact.phone_number}
                          </tr>

                    ) ;
                }
              });

        var ContactList = React.createClass({
              render: function(){
                  var contactRows = this.props.list.map( item => {
               return <Contact key={item.name} contact={item} /> //something wrog here
           }); 
                        return (
                      <tbody >
                          {contactRows}
                          <ContactForm />
                      </tbody>
                    ) ;
                }
              });

        var ContactsTable = React.createClass({
              render: function(){
                  return (
                    <table className="table table-bordered">
                          <thead>
                            <tr>
                            <th>Name</th>
                            <th>Address</th>
                            <th>Phone Number</th>
                            </tr>
                          </thead>
                          <ContactList contacts={this.props.contacts}  />
                    </table>
                    );
              }
          });
       var ContactsApp = React.createClass({
          render: function(){
              return (
                    <div>
                       <h1>Contact List.</h1>
                       <ContactsTable list ={this.props.contacts}  /> 
                    </div>
              );
          }
      });
//=====================================================//
index.js 

import '../node_modules/bootstrap/dist/css/bootstrap.css';  
import React from 'react';
import ReactDOM from 'react-dom';
import ContactsApp from './App';

     var contacts = [
            {
                "name": "Contact 1",
                "address": "123 Test St",
                "phone_number": "132-3212"
            },

            {
                "name": "Contact 2",
                "address": "23 Main St",
                "phone_number": "934-4329"
            },

            {
                "name": "Contact 3",
                "address": "4 Lower St",
                "phone_number": "432-5832"
            },

            {
                "name": "Contact 4",
                "address": "49 Upper Street",
                "phone_number": "934-4290"
            }
          ] ;       

    ReactDOM.render(
      <ContactsApp  contacts={contacts}  />,
      document.getElementById('root')
    );

Answer 1

<ContactsTable list ={this.props.contacts}  /> 

在上面的行中，您传递了 list，但在类中您尝试访问 this.props.contacts。将两者更改为 list 或 contacts:

<ContactList contacts={this.props.contacts}  />
             ^^^ your prop name is list

也在这里:

<ContactList contacts={this.props.contacts}  />

您已经传递了 contacts，但随后尝试在 map 调用的类中访问 this.props.list:

var contactRows = this.props.list.map( item => {
                             ^^^^ your prop name is contacts