如何从父组件获取子组件状态并实现条件渲染？

问题背景 #

现有ParentComponent展示多个主题，每个主题的状态由ChildComponent随机生成（可选值：in-progress、review-required、complete）。需要在父组件中根据子组件的状态做条件渲染：

• in-progress：不显示内容
• complete：显示<FaCrosshairs>图标
• review-required：显示<FaCoffee>图标

原组件代码如下：

ParentComponent 原代码 #

import React from "react";
import ChildComponent from "./ChildComponent.js";
import { FaCoffee, FaCrosshairs } from "react-icons/fa";

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: "Topic 1" },
        { id: 2, name: "Topic 2" },
        { id: 3, name: "Topic 3" }
      ]
    };
  }
  render() {
    let data = this.state.data;
    let lists = data.map((d) => {
      return (
        <div style={{ cursor: "pointer" }}>
          <p key={d.id}>{d.name}</p>
          <div style={{ color: "red" }}>
            <ChildComponent id={d.id}></ChildComponent>
          </div>
          <div>
            <p style={{ border: "1px solid black" }}>
              Base on the component status do something. If in-progress then do
              nothing. If Complete then show <FaCrosshairs />
              If review-required then show <FaCoffee />
              etc inside this p tag.
            </p>
          </div>
        </div>
      );
    });
    return <div>{lists}</div>;
  }
}

export default ParentComponent;

ChildComponent 原代码 #

import React from "react";

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      calculatedStatus: ""
    };
  }
  componentDidMount() {
    this.setComponentState();
  }
  componentDidUpdate(prevProps) {
    if (prevProps !== this.props) {
      this.setComponentState();
    }
  }
  setComponentState = () => {
    var textArray = ["in-progress", "review-required", "complete"];
    var randomIndex = Math.floor(Math.random() * textArray.length);
    var randomElement = textArray[randomIndex];
    this.setState({ calculatedStatus: randomElement });
  };
  render() {
    return <div>{this.state.calculatedStatus}</div>;
  }
}

export default ChildComponent;

解决方案 #

方法一：子组件通过回调传递状态给父组件 #

这是最符合组件通信逻辑的方案，子组件生成状态后主动通知父组件，父组件维护状态并做条件渲染。

修改后的 ChildComponent

import React from "react";

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      calculatedStatus: ""
    };
  }

  componentDidMount() {
    this.setComponentState();
  }

  // 修正props对比逻辑：只对比id属性，避免不必要的状态更新
  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.setComponentState();
    }
  }

  setComponentState = () => {
    var textArray = ["in-progress", "review-required", "complete"];
    var randomIndex = Math.floor(Math.random() * textArray.length);
    var randomElement = textArray[randomIndex];
    // 状态更新完成后，调用父组件传入的回调传递状态
    this.setState({ calculatedStatus: randomElement }, () => {
      this.props.onStatusChange(this.props.id, randomElement);
    });
  };

  render() {
    return <div>{this.state.calculatedStatus}</div>;
  }
}

export default ChildComponent;

修改后的 ParentComponent

import React from "react";
import ChildComponent from "./ChildComponent.js";
import { FaCoffee, FaCrosshairs } from "react-icons/fa";

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: "Topic 1" },
        { id: 2, name: "Topic 2" },
        { id: 3, name: "Topic 3" }
      ],
      topicStatus: {} // 存储每个主题对应的状态
    };
  }

  // 接收子组件传递的状态，更新到父组件state中
  handleStatusChange = (topicId, status) => {
    this.setState(prevState => ({
      topicStatus: {
        ...prevState.topicStatus,
        [topicId]: status
      }
    }));
  };

  // 根据状态返回对应图标或空内容
  renderStatusIcon = (status) => {
    switch(status) {
      case "complete":
        return <FaCrosshairs />;
      case "review-required":
        return <FaCoffee />;
      case "in-progress":
      default:
        return null;
    }
  };

  render() {
    let data = this.state.data;
    let lists = data.map((d) => {
      const status = this.state.topicStatus[d.id];
      return (
        // 将key移到循环的最外层元素，符合React列表渲染规范
        <div style={{ cursor: "pointer" }} key={d.id}>
          <p>{d.name}</p>
          <div style={{ color: "red" }}>
            <ChildComponent id={d.id} onStatusChange={this.handleStatusChange} />
          </div>
          <div>
            <p style={{ border: "1px solid black" }}>
              {this.renderStatusIcon(status)}
            </p>
          </div>
        </div>
      );
    });
    return <div>{lists}</div>;
  }
}

export default ParentComponent;

关键修改说明

1. 子组件新增onStatusChange回调props，在状态更新完成后传递状态给父组件；
2. 父组件维护topicStatus对象，存储每个主题ID对应的状态；
3. 修复原代码中key的位置（必须放在循环的最外层元素）；
4. 修正子组件componentDidUpdate的props对比逻辑，避免无效的状态更新；
5. 提取renderStatusIcon方法，简化条件渲染逻辑，提升代码可读性。

方法二：将状态生成逻辑移到父组件 #

如果状态生成逻辑不需要封装在子组件中，直接把状态生成移到父组件会更简单，父组件直接拥有所有状态，无需组件通信。

修改后的 ParentComponent

import React from "react";
import ChildComponent from "./ChildComponent.js";
import { FaCoffee, FaCrosshairs } from "react-icons/fa";

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    const data = [
      { id: 1, name: "Topic 1" },
      { id: 2, name: "Topic 2" },
      { id: 3, name: "Topic 3" }
    ];
    // 初始化每个主题的随机状态
    const topicStatus = data.reduce((acc, item) => {
      const textArray = ["in-progress", "review-required", "complete"];
      const randomIndex = Math.floor(Math.random() * textArray.length);
      acc[item.id] = textArray[randomIndex];
      return acc;
    }, {});
    this.state = {
      data,
      topicStatus
    };
  }

  renderStatusIcon = (status) => {
    switch(status) {
      case "complete":
        return <FaCrosshairs />;
      case "review-required":
        return <FaCoffee />;
      case "in-progress":
      default:
        return null;
    }
  };

  render() {
    let data = this.state.data;
    let lists = data.map((d) => {
      const status = this.state.topicStatus[d.id];
      return (
        <div style={{ cursor: "pointer" }} key={d.id}>
          <p>{d.name}</p>
          <div style={{ color: "red" }}>
            <ChildComponent id={d.id} status={status} />
          </div>
          <div>
            <p style={{ border: "1px solid black" }}>
              {this.renderStatusIcon(status)}
            </p>
          </div>
        </div>
      );
    });
    return <div>{lists}</div>;
  }
}

export default ParentComponent;

修改后的 ChildComponent

import React from "react";

class ChildComponent extends React.Component {
  render() {
    // 直接渲染父组件传递的状态
    return <div>{this.props.status}</div>;
  }
}

export default ChildComponent;

这种方案代码更简洁，适合状态生成逻辑不需要独立封装的场景。

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