Question

我必须使用不同的功能组件。

所有课程
添加课程

都是两个不同的页面。

AllCourses 组件显示我使用对象数组的所有课程。

现在来自我使用表单添加课程的 AddCourses 组件。如何从 AddCourses 更新或添加新课程到 AllCourses。

我通过手机发帖谢谢。

Answer 1

如果这只是一个简单的练习应用程序并且不需要复杂的状态管理，那么您需要做的就是在包含您的所有课程和添加课程页面的父组件中声明 courses 状态。此父组件可能只是您的 app.js

然后在您的 app.js 中创建一个函数，将一个新的课程对象推送到您的课程数组状态。之后，将该函数作为道具传递给您的“添加课程”页面，并在那里使用它从子组件添加课程。

Answer 2

您可以使用 props 将数据从一个组件发送到另一个组件，在这里，我将数据从父组件 (AllCourses.js) 发送到子组件 (AddCourses.js)。

AllCourses.js

import React from 'react'
import AddCourses from './AddCourses.js';

class AllCourses extends React.Component {
render(){
    return(
    <div>
        <AddCourses course="Data from AddCourses"/>
    </div>
      );
   }
}

export default AllCourses;

AddCourses.js

import React from 'react';
const AddCourses = (props) => {
    return(
          <h1> {props.message} </h2> //You can add form here and pass the value of the form 
    );
}
export default AddCourses;

关于在 Child 与父母之间或兄弟姐妹与兄弟姐妹之间发送数据，您可以参考博客 Use of Props to transfer Data between Components

如何从 React 中的表单组件更新其他组件状态

2 个答案: