React Native父组件如何获取子函数组件内部的自定义state状态值

不管是函数组件还是类组件，内部定义的state默认都是私有状态，父组件无法直接访问子组件的内部state。你尝试通过handleRender(item).props.stateABC获取值的方式本身是错误的：handleRender(item)返回的是React元素对象，其props属性只包含你主动传递给该组件的入参，和组件内部的state没有任何关系，自然拿不到对应值。

方案1：状态提升（最推荐，符合React单向数据流规范） #

将原本定义在Item5中的stateABC提升到父组件Session中维护，再通过props将状态和修改状态的方法传递给Item5使用，这样Session天然就可以直接访问stateABC。

代码修改示例 #

1. Session.js修改：

function Session() {
  // 将状态提升到父组件维护
  const [stateABC, setStateABC] = useState("123");
  // 这里可以直接访问stateABC
  console.log(stateABC)
  return (
    <View>
      {handleRender(item, stateABC, setStateABC)}
    </View>
  );
}

2. handleRender.js修改：

export function handleRender(item, stateABC, setStateABC) {
  if(item == "Item5"){
    // 把状态和修改方法作为props传递给Item5
    return <Item5 stateABC={stateABC} setStateABC={setStateABC} />;
  }
}

3. Item5.js修改：

export function Item5({stateABC, setStateABC}) {
  // 无需再在Item5内部定义stateABC，直接使用props传入的值即可
  return (
    // 原有渲染逻辑不变
  );
}

方案2：使用ref + useImperativeHandle透传状态（适合状态确实应该由子组件维护的场景） #

如果你确认stateABC的维护逻辑应该放在Item5内部，只是需要对外暴露访问入口，可以通过forwardRef + useImperativeHandle的组合，将指定状态暴露给父组件。

代码修改示例 #

1. Item5.js修改：

import { forwardRef, useImperativeHandle, useState } from 'react';
// 用forwardRef包裹组件，接收父组件传递的ref
export const Item5 = forwardRef((props, ref) => {
  const [stateABC, setStateABC] = useState("123"); 
  // 暴露要给父组件访问的属性
  useImperativeHandle(ref, () => ({
    stateABC
  }));
  return (
    // 原有渲染逻辑不变
  );
})

2. handleRender.js修改：

export function handleRender(item, ref) {
  if(item == "Item5"){
    // 把ref绑定到Item5组件上
    return <Item5 ref={ref} />;
  }
}

3. Session.js修改：

import { useRef } from 'react';
function Session() {
  const item5Ref = useRef(null);
  // 需要访问stateABC时，通过ref.current获取
  const getStateABC = () => {
    console.log(item5Ref.current?.stateABC)
  };
  return (
    <View>
      {handleRender(item, item5Ref)}
    </View>
  );
}

方案3：全局状态管理 #

如果需要共享状态的组件层级很深、或者多个不相关组件都要访问该状态，可以引入Zustand、Redux、React Context等全局状态管理方案维护stateABC，所有需要访问该状态的组件都从全局状态中读取即可。

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