时间戳

首页 > 解决方案 > 在组件之间传递状态

javascript - 在组件之间传递状态

问题描述

我编写了一个带有状态的组件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>

那么它会起作用吗？

标签： javascriptreactjsreact-component

解决方案

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

如果这些组件有一个共同的父组件，那么您需要将此状态上移一步进入公共父组件并传递处理程序以将状态更新为并将状态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

推荐阅读