如何在React中访问孩子的状态

Question

又是我，

我有这个代码：

/* App.js */

class App extends Component {

    state = {
        active1: true,
        active2: false,
        active3: false,
        active4: false,
    }

    render() {
        if (this.state.active1) {
            return(
                <div className="wrapper">
                    <Header />
                </div>
            )
        } else if (this.state.active2) {
            return(
                <div className="wrapper">
                    <Header />
                </div>
            )
        } else if (this.state.active3) {
            return(
                <div className="wrapper">
                    <Header />
                </div>
            )
        } else if (this.state.active4) {
            return(
                <div className="wrapper">
                    <Header />
                </div>
            )
        }

        return(
            <div className="wrapper">
                <Header />
            </div>
        )
    }
}

如您所见，我在'Header.js'中具有<Header />组件：

/* Header.js */

class Header extends Component {

    state = {
        active1: true,
        active2: false,
        active3: false,
        active4: false,
    }

    render() {
        return(
            <header className="container">
                    <button className="buttonName" onClick={() => {
                        this.setState({
                            active1: true,
                            active2: false,
                            active3: false,
                            active4: false,
                        })
                    }}>Accueil</button>
                    <button className="buttonName" onClick={() => {
                        this.setState({
                            active1: false,
                            active2: true,
                            active3: false,
                            active4: false,
                        })
                    }}>Portfolio</button>
                    <button className="buttonName" onClick={() => {
                        this.setState({
                            active1: false,
                            active2: false,
                            active3: true,
                            active4: false,
                        })
                    }}>Curriculum</button>
                    <button className="buttonName" onClick={() => {
                        this.setState({
                            active1: false,
                            active2: false,
                            active3: false,
                            active4: true,
                        })
                    }}>Tarifs</button>
            </header>
        )
    }
}

我在React DevTools上看到了一些东西：this.setState（）更改了<Header />的状态，而不是<App />.的状态<App />.

所以这是我的问题：如何访问<Header />状态以对其施加条件。 因为这里的代码无法正常工作：

我不能写这个：

if (Header.state.active1) {//Do something}

因为它会引发错误。

那么，你知道要做些什么吗？

Answer 1

抱歉，但是我认为您在这里进行了一些过度设计。 我想您正在尝试做类似的事情。

 const menu = [ { label: 'Item 1', id: 1 }, { label: 'Item 2', id: 2 }, { label: 'Item 3', id: 3 }, { label: 'Item 4', id: 4 }, ]; class Header extends React.Component { render () { const { items, setActive, active } = this.props; return ( <header> { items.map(item => ( <button className={active === item.id ? 'active': ''} key={item.id} onClick={() => setActive(item.id)} > {item.label} </button> )) } </header> ); } } class App extends React.Component { state = { active: 1, }; setActive = (id) => { this.setState({ active: id }); } render() { return( <Header items={menu} active={this.state.active} setActive={(id) => this.setActive(id)} /> ); } } ReactDOM.render( <App />, document.getElementById('app')); 

 .active { background: blue; } 

 <div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>