javascript - Reactjs:如何从 child 更新 parent 的状态

Question

我正在尝试通过 setState 通过子组件更新父组件的状态。下面是我的父组件:

全布局

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Header from '../components/header/header.jsx';
import Customizer from '../components/customizer/customizer';
import { Navbar, NavbarBrand, Collapse } from 'reactstrap';
export const settings = {
    navbarbg: 'skin1', 
    sidebarbg: 'skin6', 
    logobg: 'skin6' 
}
class Fulllayout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            settings: settings
        };
    }
    render() {
        return (
             <div id="main-wrapper">
                <header data-navbarbg={this.state.settings.navbarbg}>
                    <Navbar expand="md" className={}></Navbar>
                </header>
                <div className="page-wrapper d-block"></div>
                <Customizer />
             </div>
        );
    }
}
export default Fulllayout;

在父级中，我定义了一个导出的常量设置。它也在 this.state 中给出。在 header 中，有一个属性 data-navbarbg={this.state.settings.navbarbg}。

我想动态改变它的值。所以，我有一个定制器，它作为一个 child 被 parent 导入。下面是子组件:

定制器

import React from 'react';
import { settings } from '../../layouts/fulllayout';
import update from 'immutability-helper';

class Customizer extends React.Component {
    constructor(props) {
        super(props);
        this.navbarbgChange = this.navbarbgChange.bind(this);
        this.state = {
            settings: settings
        };
    }
    navbarbgChange(e) {
        var skin = e.currentTarget.dataset.navbarbg;
        var abc = update(this.state.settings, {
            navbarbg: { $set: skin }
        });
        this.setState({ settings: abc });
    }

    render() {
        return (
            <aside className="customizer" id="customizer">
                <a className="service-panel-toggle text-white"></a>
                <div className="customizer-body pt-3">
                    <div className="mt-3 border-bottom px-3">
                        <ul className="theme-color mb-2">
                            <li><a data-navbarbg="skin1" onClick={this.navbarbgChange}></a></li>    
                        </ul>
                    </div>
                </div>
            </aside>
        );
    }
}
export default Customizer;

在定制器中，通过单击颜色，我想将父级的 setState 设置为 data-navbarbg 属性中给定的值。

如果我将这段代码放在父 jsx 文件中，它工作正常，但由于某些原因，这些文件应该分开。

那么，我的代码中缺少什么？或者整个方法是错误的？谢谢。

Answer 1

在 Customizer 中定义 navbarbgChange 是否有原因？

您可以考虑将 navbarbgChange 移至 Fulllayout。

这样就可以了

<li><a data-navbarbg="skin1" onClick={this.props.navbarbgChange}></a></li>

这将确保 Fulllayout 在其状态下具有更新的背景。这也确保了良好的关注点分离，因为 settings 是在父组件而不是子组件中定义的