Javascript 组件之间的传递状态

我编写了一个带有状态

chosenGenre

的组件，其中有一个函数可以根据单击的按钮更改状态

我想获取更新的状态（即

string

）并在另一个组件中使用它

import React, { Component } from 'react';
import GenreSelectPage from './GenreSelectPage';
import InRoomPage from './InRoomPage';

export default class componentParent extends Component {

    state = {
      chosenGenre: ""
    }

    handleClick = (genreName) => {
      this.setState({ chosenGenre: genreName });
    }

    render() {
      return(
        <div className = "InRoomPage">
          <GenreSelectPage clickHandler={this.handleClick}></GenreSelectPage>
          <InRoomPage chosenGenre={this.state.chosenGenre}></InRoomPage>
        </div>
      )
    }
}

这是声明状态的组件：

import React, { Component } from 'react';
import Genre from './Genre';
import './GenreSelectPage.css';
import Blues from '../Blues.png';
import Classical from '../Classical.png'; 
import Country from '../Country.png';

export default class GenreSelectPage extends Component{

    state = {
        chosenGenre: ""
    }

    handleClick = (genreName) => {
        this.setState({ chosenGenre: genreName });
    }

    render() {
        return(
        <div className = "GenreSelectPage">
        <h3>Select your desired Kollab Room Genre</h3>
        <Genre genrePicture= {Blues} genreClicked = {()=>this.handleClick("Blues")}/>
        <Genre genrePicture= {Classical} genreClicked = {()=>this.handleClick("Classical")}/>
        <Genre genrePicture= {Country} genreClicked = {()=>this.handleClick("Country")}/>
        </div>
        ) 
     }
}

我应该在内部更改什么：

<p>Welcome to {GenreSelectPage.state.chosenGenre} room !</p>

欢迎来到{GenreSelectPage.state.chosenGenre}房间

---

那么它会起作用吗？

您可以尝试以下任何一种方法

a。将状态移动到

GenreSelectPage

和

inroompace

的公共父组件。将

handleGenereChange

方法作为道具传递到

GenreSelectPage

并在

parentComponent

中设置状态。将状态值作为道具发送到Roompage中的

。这被称为提升国家地位。详情请浏览

b。使用Redux。更多信息请访问
普通家长：（您可以将您的状态提升一级）

如果这些组件有一个公共父组件，那么您需要将此状态向上移动一步到公共父组件中，并将处理程序传递到更新状态到
GenreSelectPage
，并将状态has
props
传递到
inroompace

没有公共父级：（可以使用Redux）

您需要使用Redux，其中您的状态将保存在一个中央存储中，您可以从组件树的任何部分的任何组件连接到该存储，并将状态保存到其道具中

用法：

在同一父项下移动组件：

你可以创建一个新组件，比如说componentParent（根据你的应用程序使用名称），将你的状态存储在此组件中

import React, { Component } from 'react';
import GenreSelectPage from './GenreSelectPage';
import InRoomPage from './InRoomPage';

export default class componentParent extends Component {

    state = {
      chosenGenre: ""
    }

    handleClick = (genreName) => {
      this.setState({ chosenGenre: genreName });
    }

    render() {
      return(
        <div className = "InRoomPage">
          <GenreSelectPage clickHandler={this.handleClick}></GenreSelectPage>
          <InRoomPage chosenGenre={this.state.chosenGenre}></InRoomPage>
        </div>
      )
    }
}

import React，{Component}来自'React'；
从“/GenreSelectPage”导入GenreSelectPage；
从“./InRoomPage”导入到roompage中；
导出默认类componentParent扩展组件{
状态={
chosenGenre:“
}
handleClick=（genreName）=>{
this.setState（{chosenGenre:genreName}）；
}
render（）{
返回(
)
}
}

另外，请检查
正如其他人所提到的，在组件之间共享状态的常用方法是使用Redux，MobX是另一种选择

下面是Redux应用程序的一个基本示例。两个组件，一个向Redux存储写入值，另一个从Redux存储读取值

设置Redux的关键部分包括：


-这将包装您的整个应用程序，并为商店提供服务，也称为减速机
reducer—在这里，您可以设置初始状态，并根据操作返回状态的更新版本
actions—actions只是具有值的对象，您可以从中读取值以更新并返回新状态
connect
-此函数将组件连接到redux，其前两个参数是
mapStateToProps
，和
mapDispatchToProps
mapStateToProps
-此参数是一个函数，允许您从状态（redux存储）中读取，并将值放入
This.props
mapDispatchToProps
-从这里执行更新存储的分派操作

减速机、操作和选择器通常位于单独的文件中，因此它们可以在组件之间轻松共享

下面的组件也将位于单独的文件中，您可以导出每个组件的
默认部分
连接部分

演示

const{Component}=React；
const{applyMiddleware，createStore}=Redux；
const{connect，Provider}=ReactRedux；
/*********************/
/**基因重新选择页**/
/*********************/
类GenreSelectPage扩展组件{
建造师（道具）{
超级（道具）；
this.selectgreen=this.selectgreen.bind（this）；
}
选择流派（e）{
常量类型=e.target.value；
this.props.select流派（流派）；
}
render（）{
返回(
GenreSelectPage组件
选择一种类型
忧郁
古典的
国家
)
}
}
//写入存储
const-mapDispatchToProps=（dispatch）=>（{selectGene:（genre）=>dispatch（{type:'SELECT_genre'，genre}}）
//连接到存储
const GenreSelectComponent=connect（null，mapDispatchToProps）（GenreSelectPage）；
/*******************/
/**侵入**/
/*******************/
Roompage扩展组件中的类{
render（）{
返回(
无阻元件
{this.props.genre}

)
}
}
//从商店里读
const-mapStateToProps=（state）=>（{genre:state.genre}）；
//连接到存储
RoomComponent中的常量=连接（MapStateTops）（在RoomPage中）；
/*******************/
/**重演**/
/*******************/
常量初始状态={
类型：空
}
const reducer=（状态=初始状态，动作）=>{
开关（动作类型）{
案例“选择类型”：
返回{
……国家，
体裁：动作。体裁
}
违约：
返回状态；
}
};
const store=createStore（reducer）；
//提供商（来自Redux）包装您的整个应用程序
ReactDOM.render(
,
document.getElementById（'root'））
);

上述两个组件之间的关系是什么？它们是否有相同的父组件？这些组件是否共享一个共同的父组件？或者这些组件有不同的父级？也粘贴您的类型组件代码。它们没有相同的父级。这两个页面是否不同？它们没有相同的父级，请提供一个示例，如何将它们放在相同的父级下？或者在我的例子中如何使用Redux？你在道具钻取和全面Redux之间遗漏了一个相当重要的中间地带：上下文api。@collin Iagree@PraveenRaoChavan.G在这个