React跨组件设置状态：如何通过Block2控制Block1元素显示？

你的需求完全符合React的设计思路，核心解法是状态提升——把两个组件共享的状态（也就是控制显示的showElem）放到它们的共同父组件中，通过props传递状态和修改状态的方法，实现兄弟组件之间的交互。

先说说你现有代码的问题：现在Block1和Block2各自维护独立的showElem状态，两者没有任何关联，所以Block2的点击事件自然没法影响Block1的UI。

下面是修正后的完整代码：

父组件（管理共享状态） #

class ParentComponent extends React.Component {
  constructor() {
    super();
    this.state = { showElem: false };
    // 提前绑定this，避免每次render都重新bind
    this.toggleShowElem = this.toggleShowElem.bind(this);
  }

  toggleShowElem() {
    this.setState(prevState => ({
      showElem: !prevState.showElem
    }));
  }

  render() {
    return (
      <div>
        <Block1 showElem={this.state.showElem} />
        <Block2 onToggle={this.toggleShowElem} />
      </div>
    );
  }
}

Block1组件（负责渲染UI） #

class Block1 extends React.Component {
  render() {
    return (
      <div>
        {/* 直接使用父组件传递过来的props状态 */}
        {this.props.showElem ? <div data-active={this.props.showElem}>我是要显示的内容</div> : null}
      </div>
    );
  }
}

Block2组件（负责触发交互） #

class Block2 extends React.Component {
  render() {
    return (
      <div>
        {/* 调用父组件传递过来的修改状态方法 */}
        <a onClick={this.props.onToggle}>Click to show Block1</a>
      </div>
    );
  }
}

CSS样式（优化后） #

/* 建议给目标元素加类名，避免全局div样式冲突 */
.hidden-elem {
  display: none;
}
.hidden-elem[data-active="true"] {
  display: block;
}

关键说明： #

• 状态提升：共享状态showElem从子组件移到父组件，父组件成为唯一的状态管理者，保证两个子组件的状态同步。
• props传递：父组件把showElem传给Block1用于渲染，把修改状态的方法toggleShowElem传给Block2用于触发交互。
• 语法修正：你原来的代码里render()方法的return写法有误（多了一层括号和大括号），已经在示例中修正；另外推荐在构造函数里提前绑定方法，或者用箭头函数定义方法，避免每次render都生成新的函数实例。

如果是函数组件的场景，还可以用useState和useCallback来实现同样的逻辑，原理完全一致——把状态放在共同父组件，通过props传递状态和操作方法。

内容的提问来源于stack exchange，提问作者ST80