javascript - 如何在 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 />'Header.js' 中的组件：

/* 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 />.

所以这是我的问题：我如何访问<Header />状态以对其应用条件。因为这里的代码不起作用：

我不能这样写：

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

因为它会引发错误。

那么你知道做同样的事情吗？

标签： javascriptreactjs

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>