javascript - React - 在无状态组件中切换

Question

我正在尝试切换无状态组件中 div 的可见性，如下所示:

    const playerInfo = (props) => {
      let isPanelOpen = false;
      return (
          <div onClick={() => isPanelOpen = !isPanelOpen }>Toggle</div>
          {isPanelOpen && <div className="info-panel">
            {props.children}
          </div>}
      );
    };

我看到 isPanelOpen 的值更改为 true，但面板未显示。我认为这是因为这是一个不会再次调用的无状态函数，因此一旦我们返回 jsx，它将具有 false 值，并且以后不会更新它。有没有办法解决这个问题，并避免将这个单一变量作为 props 通过 4 个以上的父无状态组件？

Answer 1

您无法通过直接为变量分配新值来告诉 React 重新渲染 UI(在您的情况下，您执行了 isPanelOpen = !isPanelOpen)。
正确的方法是使用setState。

但是你不能在无状态组件中执行此操作，你必须在有状态组件中执行此操作，因此你的代码应如下所示

import React, {Component} from 'react';
class playerInfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            isPanelOpen: false
        }
    }
    render() {
        return (
            <div onClick={() => this.setState({isPanelOpen: !this.state.isPanelOpen})}>Toggle</div>
            {this.state.isPanelOpen && <div className="info-panel">
              {this.props.children}
          </div>}
        );
    }
}

说明

记住两件事:
1) 您的 UI 应该仅绑定(bind)到 this.state.XXXX (对于有状态组件)或 props.XXX (对于无状态组件)。
2) 更新UI的唯一方法是调用setState()方法，没有其他方法会触发React重新渲染UI。

但是...由于无状态组件没有 setState 方法，因此如何更新它？

一个答案:无状态组件应该包含在另一个有状态组件中。

例子

假设您的无状态组件名为 Kid，并且您还有另一个名为 Mum 的有状态组件。

import React, {Component} from 'react';
class Mum extends Component {
    constructor(props){
        super(props);
        this.state = {
            isHappy: false
        }
    }
    render() {
        return (
           <div>
                <button onClick={() => this.setState({isHappy: true})}>Eat</button>
                <Kid isHappy={this.state.isHappy}/>
           </div>
        );
    }
}

const Kid = (props) => (props.isHappy ? <span>I'm happy</span> : <span>I'm sad</span>);