React中如何在子插槽访问父组件状态？现有代码无法正常显示

你当前用的是Render Props模式，但ComponentA只是直接渲染children，没有把内部的state1和state2作为参数传递给这个children函数，导致子组件里的state1、state2都是undefined，页面无法正常显示内容。

修改ComponentA，将children当作函数调用并传入状态值即可解决：

import React, { useState } from 'react';

const ComponentA = ({ children }) => {
  const [state1, setState1] = useState('Hello');
  const [state2, setState2] = useState('World');

  // 把内部状态作为参数传递给children函数
  return <div>{children(state1, state2)}</div>;
};

export default ComponentA;

修改后，YourComponent中的children函数就能正确接收并使用父组件的state1和state2，页面会正常显示对应的状态内容。

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