如何在React父组件中访问子组件state并更新视图

在React中，实现子组件状态同步到父组件的最佳方案是状态提升——将共享状态从子组件移至共同的父组件，通过props传递状态更新方法，遵循单向数据流的设计原则。

具体实现步骤： #

1. 父组件管理共享状态：将子组件的collection状态移到父组件Products.jsx中，同时定义状态更新方法，并通过props传递给子组件。
2. 子组件触发状态更新：子组件不再维护自身的collection状态，而是通过父组件传入的方法触发状态变更。
3. 父组件使用同步后的状态：父组件利用同步后的状态更新span标签内容。

修改后的父组件代码（Products.jsx）： #

import React, { useState } from "react";
import useFetch from "../../hooks/useFetch";
import CollectionsBar from "../../components/CollectionsBar/CollectionsBar";
import "./Products.scss";

const Products = () => {
  // 将状态提升到父组件
  const [selectedCollectionIndex, setSelectedCollectionIndex] = useState();

  return (
    <div className="sl-c-products">
      <div className="sl-l-products__flex">
        {/* 使用同步后的状态更新span内容 */}
        <span>{selectedCollectionIndex !== undefined ? `选中了第${selectedCollectionIndex + 1}个分类` : "未选择分类"}</span>
      </div>
      {/* 将状态更新方法通过props传给子组件 */}
      <CollectionsBar onCollectionSelect={setSelectedCollectionIndex} />
    </div>
  );
};

export default Products;

修改后的子组件代码（CollectionsBar.jsx）： #

import React from "react";
import useFetch from "../../hooks/useFetch";
import "./CollectionsBar.scss";

const CollectionsBar = ({ onCollectionSelect }) => {
  
  //SETTING DATA FOR useFetch
  const { data, loading, error } = useFetch(
    "/collection-list?populate[0]=collecao&populate=FundoTitulo&populate[1]=collecao.Imagem&populate=collecao.products&populate=collecao.products.img&populate=collecao.products.img2"
  );
  const minifyData = data?.attributes.collecao.data;

  //COLLECTIONS BAR COMPONENT
  return (
    <div className="sl-c-collections-bar">
      <div className="sl-l-bar__flex">
        {minifyData?.map((item, index) => {
          return (
            <div
              onClick={() => {
                // 调用父组件传入的方法更新状态
                onCollectionSelect(index);
              }}
              key={index}
              className="sl-c-flex__box"
            >
              <img
                src={
                  import.meta.env.VITE_REACT_APP_UPLOADS_URL +
                  item.attributes.Imagem.data.attributes.url
                }
                alt="Imagem Produto"
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CollectionsBar;

方案说明： #

• 状态提升是React官方推荐的父子组件共享状态的方式，符合单向数据流的理念，状态变更轨迹清晰，便于维护和调试。
• 如果后续需要在更多组件中共享该状态，可以考虑使用Context API或者Redux等状态管理工具，但当前场景下状态提升足够简洁高效。

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