在组件之间传递状态

Question

我写了一个带有状态的组件，chosenGenre在它里面，有一个函数可以根据点击的按钮改变状态。

我想采用更新的状态（即string）并在另一个组件中使用它。

这是声明状态的组件：

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>
        ) 
     }
}

这是我想使用组件chosenGenre状态的新GenreSelectPage组件：

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

export default class InRoomPage extends Component {

    render() {
        return(
            <div className = "InRoomPage">
                <p>Welcome to {GenreSelectPage.state.chosenGenre} page</p>
            </div>
        )
    }
}

我应该在里面改变什么：

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

那么它会起作用吗？

Answer 1

共同的父母：（ 您可以将您的状态提升一级）

如果这些组件有一个共同的父，那么你需要移动这种状态一步成共同父组件并通过处理程序来更新状态进入GenreSelectPage，并通过国家有props 进InRoomPage。

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

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

用法：https : //redux.js.org/basics/usage-with-react

移动同一父级下的组件：

您可以创建一个新组件说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>
      )
    }
}

也请检查上下文 API

Answer 2

您可以尝试以下任意操作

A。将状态移至GenreSelectPage和的公共父组件InRoomPage。将handleGenereChange方法传递给GenreSelectPageas 属性并在parentComponent. 将状态值作为 props 发送到InRoomPage。这就是所谓的提升国家。更多详细信息请访问https://reactjs.org/docs/lifting-state-up.html

b. 使用 Redux。更多信息请访问https://almerosteyn.com/2016/08/redux-explained-again