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

debugcn 发表于 Dev

问号

所以我有

一个名为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;

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;

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;

和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;

我需要在sectionTitle中设置我的扩展箭头所在的状态，并根据是否按下按钮来显示或不显示部分内容。

我是新来的反应者，我不知道该怎么做

布扎托

对于像这样的简单树，您最好将其arrowClicked和处理程序移至父级Section（将其转换为基于类的组件）。然后你作为道具传递displaySectionContents到SecTitle。由于状态位于父树上，因此您可以Content基于arrowClicked状态进行条件渲染：

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

SectTitle成为功能组件，因为它不需要状态，并且您仅使用传递的props：

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

一旦您单击按钮，props.displaySectionContents将更新父状态，并且SectionContent有权访问以arrowClicked进行正确评估

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。