javascript - ReactJS:React 组件未渲染

Question

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 获取联系人数据，但我想显示我保存在表中的所有联系人。在幕后，有react-flux 设置。状态“联系人”基本上是数组内的一个对象，当我使用 react 工具时，我看不到那里的联系人组件，而且如果我尝试使用 console.log 某些内容来验证联系人中没有任何工作组件，似乎 props 没有传递给 Contact 组件，有时我也得到[弃用]主线程上的同步XMLHttpRequest已被弃用，因为它对最终用户的体验有不利影响。不知道是否是因为这个。

有人可以解释一下出了什么问题吗？提前致谢!!.

Answer 1

您需要将 props 发送到 ContactList.js，即点击 firebase 后获得的 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

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

谢谢。