Javascript 如何将状态从一个组件传递到另一个组件，以及如何修改状态？

所以我有

一个名为section.js的组件：

import React from 'react';

import SectTitle from './Section_Title/Section_Title.js'
import SectContent from './Section_Content/Section_Content.js'

import classes from './Section.module.css'

const section = (props) => {
    const sectionNameMapping = {
        profile: 'Profile',
        education: 'Education',
        relevantWorkExp: 'Relevant Work Experience',
        otherWorkExp: 'Other Work Experience'
    }

    return (
        <div className={classes.Section}>
            <SectTitle title={sectionNameMapping[props.sectionName]} />
            <SectContent sectionName={props.sectionName}/>
        </div>
    )
}

export default section;

从“React”导入React；
从“./Section\u Title/Section\u Title.js”导入SectTitle
从“./Section\u Content/Section\u Content.js”导入SectContent
从“./Section.module.css”导入类
常量部分=（道具）=>{
const sectionNameMapping={
简介：'简介'，
教育:"教育",，
相关工作经验：“相关工作经验”，
otherWorkExp:“其他工作经验”
}
返回(
)
}
导出默认部分；

SectionTitle.js

import React,{Component} from 'react';

import classes from './Section_Title.module.css'

import expandArrow from '../../../assets/png_files/expand_arrow.png'

class SectTitle extends Component {
    state = {
        arrowClicked: false
    }

    displaySectionContents = () => {
        console.log('[displaySectionContents] Executed ... ' + this.state.arrowClicked)
        this.setState({
            arrowClicked: !this.state.arrowClicked
        })
    }

    render(){
    return (
        <div className={classes.SectionTitle}>
            <div>{this.props.title}</div>
            <div>
                <button
                 className={classes.ButtonSectTitle} 
                 onClick={this.displaySectionContents}>
                     <img className={classes.ExpandArrow} 
                      src={expandArrow} 
                      style={{transform: this.state.arrowClicked ? 'rotate(0deg)' : 'rotate(-90deg)'}}/></button></div>
           </div>
    )}
}

export default SectTitle;

import React，{Component}来自'React'；
从“./Section\u Title.module.css”导入类
从“../../assets/png\u文件/expand\u arrow.png”导入expandArrow
类扩展组件{
状态={
箭头：false
}
displaySectionContents=（）=>{
console.log（“[displaySectionContents]已执行…”+this.state.arrow已单击）
这是我的国家({
已单击箭头：！this.state.arrowClicked
})
}
render（）{
返回(
{this.props.title}
)}
}
导出默认标题；

SectionContent.js

import React, { Component } from 'react';

import SectionItem from './Section_Item/Section_Item.js'

import classes from './Section_Content.module.css'

class SectionContent extends Component {   
    render() {
        return (
        <div className={classes.SectionContent}>
            <SectionItem sectionName={this.props.sectionName}/>
        </div>
        )
    }
}

export default SectionContent;

import React，{Component}来自'React'；
从“./Section\u Item/Section\u Item.js”导入SectionItem
从“./Section\u Content.module.css”导入类
类SectionContent扩展组件{
render（）{
返回(
)
}
}
导出默认内容；

和SectionItem.js

import React, { Component } from 'react';

import classes from './Section_Item.module.css';

import jsonContent from '../../../../assets/json_files/json_content.json';


class SectionItem extends Component {
    render() {
        if (Object.keys(jsonContent).includes(this.props.sectionName) && (this.props.sectionName == 'profile')) {
            return <div>{jsonContent[this.props.sectionName]}</div>
        } else {
            return <div>test</div>
        }
    }
}

export default SectionItem;

import React，{Component}来自'React'；
从“./Section_Item.module.css”导入类；
从“../../../../assets/json_files/json_content.json”导入jsonContent；
类SectionItem扩展组件{
render（）{
if（Object.keys（jsonContent）.includes（this.props.sectionName）&&（this.props.sectionName=='profile'））{
返回{jsonContent[this.props.sectionName]}
}否则{
回归试验
}
}
}
导出默认项；

我需要在sectionTitle中设置展开箭头所在的状态，并根据是否按下按钮来显示节内容

---

我是新来的反应者，我不知道怎么做，有很多解决办法

最简单的方法是向

部分

组件添加一些状态，并向子组件添加getter/setter

const节=（道具）=>{
常量[arrowClicked，setArrowClicked]=useState（false）
返回(
setArrowClicked（true）}title={sectionNameMapping[props.sectionName]}/>
)
类扩展组件{
状态={
箭头：false
}
返回(
{this.props.title}
)}
类SectionContent扩展组件{
render（）{
//单击此.props.arrow
返回(
)
}
}

---

另一个可以是

React.Context

，使用另一个状态管理框架，比如，

Redux

，

MobX

。。。或者只需将状态存储在窗口对象中，并触发

forceUpdate（）

，不，不要这样做对于这样一个简单的树，您最好将

箭头移动到父
部分（将其转换为基于类的组件）。然后，您可以作为道具
displaysectcontents
传递到
SecTitle
。由于状态位于父树，您可以基于单击的箭头状态对内容进行有条件渲染：

class Section extends Component {

    state = {
        arrowClicked: false
    }

    displaySectionContents = () => {
        console.log('[displaySectionContents] Executed ... ' + this.state.arrowClicked)
        this.setState({
            arrowClicked: !this.state.arrowClicked
        })
    }

    return (
        <div className={classes.Section}>
            // pass down the arrow handler and arrowClicked
            <SectTitle title={sectionNameMapping[this.props.sectionName]} displaySectionContents={this.displaySectionContents} arrowClicked={this.props.arrowClicked}  />
             // if arrow clicked is true SectContent is rendered
            { this.state.arrowClicked && <SectContent sectionName={this.props.sectionName}/> } 
        </div>
    )
}

类节扩展组件{
状态={
箭头：false
}
displaySectionContents=（）=>{
console.log（“[displaySectionContents]已执行…”+this.state.arrow已单击）
这是我的国家({
已单击箭头：！this.state.arrowClicked
})
}
返回(
//向下传递箭头处理程序并单击箭头
//如果单击的箭头为真，则呈现内容
{this.state.arrow已单击&&}
)
}

SectTitle成为一个函数组件，因为它不需要状态，并且您只使用传递的道具：

const SectTitle = (props) {
    return (
        <div className={classes.SectionTitle}>
            <div>{props.title}</div>
            <div>
                <button
                 className={classes.ButtonSectTitle} 
                 onClick={props.displaySectionContents}>
                     <img className={classes.ExpandArrow} 
                      src={expandArrow} 
                      style={{transform: props.arrowClicked ? 'rotate(0deg)' : 'rotate(-90deg)'}}/></button></div>
           </div>
    )}
}

const SectTitle=（道具）{
返回(
{props.title}
)}
}

单击按钮
道具后，displaySectionContents
将更新父状态，
SectionContent
将有权访问
箭头单击的
，以便正确评估