ReactJS：反應組件未呈現

Question

聯系人列表.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>
           )
        }

聯系.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 設置。 狀態“聯系人”基本上是數組內的一個對象，當我去反應工具時，我在那里看不到聯系人組件，如果我嘗試console.log一些東西來驗證聯系人組件中沒有任何工作，似乎道具是不傳遞給 Contact 組件，有時我也會[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. 不知道是不是因為這個。

有人可以解釋我怎么了？ 提前致謝！！。

Answer 1

您需要將 props 發送到 ContactList.js，即在點擊 firebase 后獲得的 response.data。 像這樣的東西： -

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

檢查你是否通過。

為了更輕松地解決它，您可以使用 React.Component ，

聯系人列表.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

聯系.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。

謝謝你。

Answer 2

您需要在ContactList組件中return Contact組件，如下所示：

this.props.contacts.map(function(contact, index) {
        return <Contact contact={contact} key={index} />
    }) 

或者，您可以使用箭頭功能：

this.props.contacts.map((contact, index) => <Contact contact={contact} key={index} />)