Question

首先，我想问一下我的陈述是否正确：＆＃34;当我们制作组件时，最好将它放在不同的文件中。这是对的吗？因为目前我这样做了，它会引起问题。

父母：

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

这是topicTable组件：

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）在topicTable组件中，console.log（＆＃34; HAHAHA＆＃34;）根本没有执行，我想知道为什么？ 2）同样对于oneTopic，

HAHAH

根本没有显示。

即使我已导出并导入所有内容

请帮忙

Answer 1

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

1）将oneTopic重命名为OneTopic

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

帮助帮助调试我的React Code

1 个答案: