ReactJS: React Component not rendering

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>
)
}

联系方式.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获取联系人数据，但我想显示我保存在表格中的所有联系人。在幕后，有反应通量设置。状态"联系人"基本上是数组中的一个对象，当我去反应工具时，我在那里看不到联系人组件，如果我尝试console.log一些东西来验证联系人组件中没有任何工作，似乎 props 没有传递给联系人组件，有时我也得到[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.不知道是不是因为这个。

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

Answer 1

您需要将道具发送到 ContactList.js即您击中 Firebase 后获得的响应数据。 像这样的东西：-

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

检查您是否通过。

为了更容易地解决它，你可以使用 反应组件 ，

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

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

谢谢。

Answer 2

您需要像这样在ContactList组件中returnContact组件：

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

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

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