帮助帮助调试我的 React 代码

Question

首先，我想问一下我的说法是否正确： "当我们制作组件时，最好将其放在不同的文件中" 正确吗？因为目前我尝试过，它会导致问题。

父母：

import React, { Component } from 'react';
import './App.css';
import {SubmitComponent} from './submitComponent.jsx';
import {topicTable} from './topicTable.jsx';
// import {TopicsContainer} from './TopicsContainer.js'
const dashboardStyle = {
border: '2px solid black',
width: '70%',
height: 'auto',
marginLeft: 'auto',
marginRight: 'auto',
marginBottom: '100px',
};

class AppDashBoard extends Component {
constructor(props) {
super(props);
this.state = {
datas: []
}
}
submitTopic = (data) => {
console.log(data);
console.log(this.state.datas);
console.log(this.state.datas.concat([data]));
this.setState({
datas: this.state.datas.concat(data)
});
console.log(this.state.datas);
}
render() {
return (
<div style={dashboardStyle}>
<h1 style={{textAlign:'center'}}>Coding Exercise</h1>
<hr /> 
<SubmitComponent submitTopic={this.submitTopic} />
<topicTable topics={this.state.datas} />
</div>
);
}
}
export default AppDashBoard

这是主题表组件：

import React, {Component} from 'react';
import {oneTopic} from './oneTopic.jsx';
export class topicTable extends Component {
render() {
const topicstable = this.props.topics.map((topic) => (
<oneTopic
title={topic.title}
desc = {topic.desc}
vote = {topic.vote}
/>
));
console.log("HAHAHAHA");
return (
<div id="topics">
{oneTopic}
</div>
);
}
}

最后，我的 oneTopic 组件：

import React, {Component} from 'react';
export class oneTopic extends Component {
render() {
return(
<div style={{width:'96%', height:300, backgroundColor :'#AAA'}}>
<h1>HAHAHAHA</h1>
</div>
);
}
}

我的问题是： 1(在主题表组件中，控制台.log("哈哈哈"(根本没有执行，我想知道为什么？ 2(也对于一个话题，哈哈

哈

根本没有显示。

即使我已经导出和导入所有内容

请帮忙

Answer 1

ReactJS 组件名称必须以大写字母开头。

1( 将 oneTopic 重命名为 OneTopic

2( 将 {oneTopic} 更改为<oneTopic />