Javascript 如何在react中的另一个组件内定义组件

我对react是新手，任何人都可以帮助我确保在react

import-react，{component}中的另一个组件中定义一个组件；
import React,{Component} from 'react';
import axios from 'axios/index'

const Course = (props)=>(

<tr>
    <td>{props.course.Name}</td>
    <td>{props.course.Course}</td>
    <td>{props.course.PassMark}</td>
    <td>{props.course.LecturerInCharge}</td>
    <td><button className="btn btn-primary" onClick
{()=>CourseView.buttonClick(props.course.Subjects)}>Subject</button></td>
<td><button className="btn btn-primary" onClick=.{()=>CourseView.TotalCalculation(props.course._id)}>Calculate</button></td>
</tr>
);

从“axios/index”导入axios
康斯特球场=（道具）=>(
{props.course.Name}
{props.course.course}
{props.course.PassMark}
{道具。课程。讲师收费}
CourseView.buttonClick（props.course.Subjects）}>Subject
CourseView.TotalCalculation（props.course.\u id）}>Calculation
);
const ComponentTwo=（）=>我是第二个组件。；
const ComponentOne=（{children}）=>{children}；
常量应用=（）=>(
);

const Todo=props=>(
{props.todo.todo_description}
{props.todo.todo_responsible}
{props.todo.todo_priority}
)
todoList（）
{
返回this.state.todos.map（函数（currentTodo，i）{
返回；
});
}
render（）
{
返回(
事項清單
描述
负责的
优先权
完整的
{this.todoList}
)
}
导出默认类CourseView扩展组件{
建造师（道具）{
超级（道具）；
此.state={
课程：[]
}
}
组件willmount（）{
axios.get（）http://127.0.0.1:4000/course）。然后（（res）=>{
this.setState（{Courses:res.data}）；
})
}
列表元素（）{
返回此.state.Courses.map（（课程，i）=>{
返回
})
}
render（）{
返回(
名称
课程
通行证
主讲人
学科
全部的
{this.listlements（）}
)
}
静态总计算（id）{
axios.get（）http://127.0.0.1:8080/total/“+id）。然后（（res）=>{
设total=（res.data.total）；
设subCount=（res.data.subjects.length）；
警报（'您必须完成'+子计数+''科目，即Rs.“+总计+”/=总计]；
})
}
静态按钮单击（主题）{
让数据=”；
console.log（主题）；
for（设i=0；i{
data=“Name:”+res.data.Name+”，Description:“+res.data.Description+”，Amount:“+res.data.Amount”；
数据=数据+'\n'；
警报（数据）；
});
}
}
}
DBSchema.js

const mongoose = require('mongoose');

const CourseSchema = new mongoose.Schema({
Name:{
    type:String,
    required:true
},
Course:{
    type:String,
    required:true
},
PassMark:{
    type:Number,
    required:true
},
LecturerInCharge:{
    type:String,
    required:true
},
Subjects:{
    type:[mongoose.Schema.Types.ObjectId],

}
});

const SubjectSchema = new mongoose.Schema({
Name:{
    type:String,
    required:true
},
Description:{
    type:String,
    required:true
},
Amount:{
    type:Number,
    required:true
}
});

mongoose.model('Course',CourseSchema);
mongoose.model('Subject',SubjectSchema);

mongoose.connect('mongodb://127.0.0.1:27017/sliit-web',     {useNewUrlParser:true}).then(()=>{
console.log('Connected to DB');
}).catch((err)=>{
   console.error(err);
 });

module.exports = mongoose;

var Express     = require('Express');
var bodyParser  = require('body-parser');
var Cors        = require('cors');
var router      = Express.Router();
var UserRoute   = require('./User/user.route');

var app = Express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(Cors());
app.use('/', UserRoute);

app.listen('8081', '127.0.0.1', function(err) {
if(err) {
    console.log(err);
    process.exit(-1);
}
console.log("Server listen on port 8081");
})

不知道你的意思。如果你能澄清的话，很高兴撤销否决票。例如，您是否只想在同一个文件中写入两个组件？是否要将功能组件写入另一个组件的渲染函数中？什么条件可以算作成功？componentDidMount（）{axios.get（'>{let TeamsFromApi=res.data.map（team=>{return{value:team，display:team}}）this.setState（{teams:[{value:''，display:'（选择您最喜欢的团队）}）.concat（TeamsFromApi）}）；}）.catch（err=>console.log（err））；/*axios.get（'>{this.setState（{subjects:res.data}）.catch（err=>console.log（err））；}）*/}Sebastian Eschweiler检查一下这个github配置文件，了解mern教程社区鼓励在代码中添加解释，而不是纯粹基于代码的答案（请参阅）。
const Todo = props => (
  <tr>
    <td>{props.todo.todo_description}</td>
    <td>{props.todo.todo_responsible}</td>
    <td>{props.todo.todo_priority}</td>
    <td>
        <Link to={"/edit/"+props.todo._id}></Link>
    </td>
    <td>
        <Link to={"/delete/"+props.todo._id}></Link>
    </td>
</tr>
)

todoList()
{
    return this.state.todos.map(function(currentTodo,i){
        return <Todo todo={currentTodo} key={i}/>;
    });
}
render()
{
    return(
        <div>
           <h3>Todo List</h3>
           <table>
               <thead>
                   <tr>
                       <th>Description</th>
                       <th>Responsible</th>
                       <th>Prioroty</th>
                       <th>Completed</th>
                   </tr>
               </thead>
               <tbody>
                   {this.todoList}
               </tbody>
           </table>
        </div>
    )
}

export default class CourseView extends Component{

constructor(props){
    super(props);
    this.state = {
        Courses:[]
    }
}

componentWillMount() {
    axios.get('http://127.0.0.1:4000/course').then((res)=>{
        this.setState({Courses:res.data});
    })
}

listelements(){
    return this.state.Courses.map((course,i)=>{
        return <Course course = {course} key={i}/>
    })
}

render() {
    return(
        <div>
            <table border="2px" align="center" style={{marginTop:100}}>
                <tr>
                <th>Name</th>
                <th>Course</th>
                <th>PassMark</th>
                <th>Lecturer in charge</th>
                <th>Subjects</th>
                    <th>Total</th>
                </tr>
                <tbody>
                {this.listelements()}
                </tbody>
            </table>
        </div>
    )
}

static TotalCalculation(id){
    axios.get('http://127.0.0.1:8080/total/'+id).then((res)=>{
        let total = (res.data.total);
        let subCount = (res.data.subjects.length);
        alert('You have to complete '+subCount+" subjects, Which will be Rs."+total+"/= in total.");
    })
}

static buttonClick(Subjects) {
    let data="";
    console.log(Subjects);
    for(let i=0;i<Subjects.length;i++){
        axios.get('http://127.0.0.1:4000/subject/'+Subjects[i]).then((res)=>{
            data = "Name: "+res.data.Name+", Description: "+res.data.Description+", Amount: "+res.data.Amount;
            data = data+'\n';
            alert(data);
        });

    }

}

}

const mongoose = require('mongoose');

const CourseSchema = new mongoose.Schema({
Name:{
    type:String,
    required:true
},
Course:{
    type:String,
    required:true
},
PassMark:{
    type:Number,
    required:true
},
LecturerInCharge:{
    type:String,
    required:true
},
Subjects:{
    type:[mongoose.Schema.Types.ObjectId],

}
});

const SubjectSchema = new mongoose.Schema({
Name:{
    type:String,
    required:true
},
Description:{
    type:String,
    required:true
},
Amount:{
    type:Number,
    required:true
}
});

mongoose.model('Course',CourseSchema);
mongoose.model('Subject',SubjectSchema);

mongoose.connect('mongodb://127.0.0.1:27017/sliit-web',     {useNewUrlParser:true}).then(()=>{
console.log('Connected to DB');
}).catch((err)=>{
   console.error(err);
 });

module.exports = mongoose;

var Express     = require('Express');
var bodyParser  = require('body-parser');
var Cors        = require('cors');
var router      = Express.Router();
var UserRoute   = require('./User/user.route');

var app = Express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(Cors());
app.use('/', UserRoute);

app.listen('8081', '127.0.0.1', function(err) {
if(err) {
    console.log(err);
    process.exit(-1);
}
console.log("Server listen on port 8081");
})