React如何实现类似Pressable的模式，将内部状态作为参数传给子渲染函数

你要实现的是React中常见的**渲染属性（Render Props）**模式，不需要借助Context，只要将作为children传入的函数执行、同时把内部状态作为参数传入即可。

核心调整点 #

你原来的代码直接渲染了children，但此时你传入的children是一个接收参数返回元素的函数，所以需要主动调用它并传入你想暴露的状态：

const Component = ({ children }) => {
  const [active, setActive] = React.useState(true);
  // 增加类型判断，兼容直接传入普通React元素的场景
  return <View>{typeof children === 'function' ? children({ active }) : children}</View>;
};

调整后你的示例代码即可正常运行，正确根据active的值渲染对应文本。

扩展：实现类似Pressable的按压状态 #

如果要复现Pressable的pressed状态逻辑，只需要给容器绑定对应的触摸事件修改状态即可：

import * as React from 'react';
import { Text, View } from 'react-native';

const PressableLike = ({ children, onPress }) => {
  const [pressed, setPressed] = React.useState(false);

  return (
    <View
      onTouchStart={() => setPressed(true)}
      onTouchEnd={() => {
        setPressed(false);
        onPress?.();
      }}
      onTouchCancel={() => setPressed(false)}
    >
      {typeof children === 'function' ? children({ pressed }) : children}
    </View>
  );
};

// 调用方式和原生Pressable完全一致
export default function App() {
  return (
    <View>
      <PressableLike onPress={() => console.log('点击触发')}>
        {({pressed}) => (
          <Text>{pressed ? "Pressed!" : "Press Me"}</Text>
        )}
      </PressableLike>
    </View>
  );
}

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