ReactJS：反应组件未呈现答案

【问题标题】：ReactJS: React Component not renderingReactJS：反应组件未呈现
【发布时间】：2018-05-23 20:09:26
【问题描述】：

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 设置。状态“联系人”基本上是数组内的一个对象，当我去反应工具时，我看不到联系人组件，如果我尝试console.log 验证联系人组件中没有任何工作，似乎道具是不传递给联系人组件，有时我也会得到 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.不知道是不是这个原因。

有人可以解释一下怎么回事吗？提前致谢！！。

【问题讨论】：

你需要returnmap函数内的组件
该死的！！！！我怎么忘记了，谢谢：P

标签： javascript reactjs

【解决方案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。

谢谢。

【讨论】：

【解决方案2】：

您需要像这样在ContactList 组件中返回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} />
    })

【讨论】：