javascript - ReactJS:React组件未呈现

ContactList.js

    var React = require('react');
    var Contact = require('./contact.js');

    var ContactList = React.createClass({
         render: function() {
           return(
               <div>
                  <h3>Contacts</h3>
                  <table className="table table-striped">
                     <thead>
                        <tr>
                           <th>Name</th>
                           <th>Number</th>
                           <th>Email</th>
                           <th></th>
                        </tr>
                    </thead>
                        <tbody>
                              {
                                this.props.contacts.map(function(contact, index) {
                                  <Contact contact={contact} key={index} />
                                })
                              }
                        </tbody>
                  </table>
               </div>
           )
        }

Contact.js

var React = require('react');

var Contact = React.createClass({
  render: function() {
      return(
         <tr>
          <td>{this.props.contact.name}</td>
          <td>{this.props.contact.phone}</td>
          <td>{this.props.contact.email}</td>
         </tr>
      )
  }
})

module.exports = Contact;

基本上，我能够从控制台的Firebase获取联系人数据，但是我想显示我保存在表中的所有联系人。在幕后，有反应通量设置。状态'联系人'基本上是数组中的一个对象，当我去反应工具时，我在那里看不到Contact组件，如果我尝试console.log验证在Contact组件中没有任何作用的话，似乎props是没有传递给Contact组件，有时我也得到
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.不知道是不是因为这个。

有人可以解释我哪里错了吗？提前致谢！！。

最佳答案

您需要将道具发送到ContactList.js，即击中火力点后获得的response.data。
像这样的东西：

React.render(<ContactList contacts= 'your response object' />);

检查是否通过。

要更轻松地解决它，您可以使用React.Component，

ContactList.js

 import React from 'react';
    import Contact from './contact'

       class ContactList extends React.Component {
         {contacts}=this.props;
             render(){
               return(
                   <div>
                      <h3>Contacts</h3>
                      <table className="table table-striped">
                         <thead>
                            <tr>
                               <th>Name</th>
                               <th>Number</th>
                               <th>Email</th>
                               <th></th>
                            </tr>
                        </thead>
                            <tbody>
                                  {
                                    contacts.map(function(contact, index) {
                                      <Contact contact={contact} key={index} />
                                    })
                                  }
                            </tbody>
                      </table>
                   </div>
               )
            }
        }
export default ContactList

Contact.js

import React from 'react'

class Contact extends React.Compponet{
{contact}=this.props;
  render() {
      return(
         <tr>
          <td>{contact.name}</td>
          <td>{contact.phone}</td>
          <td>{contact.email}</td>
         </tr>
      )
  }
}

export default Contact

您必须将道具传递给ContactList类，该类将在内部将其传递给Contact。

谢谢。