Reactjs：如何在组件内创建带有 args 的函数

Posted 2023-03-16

【中文标题】Reactjs：如何在组件内创建带有 args 的函数

【英文标题】：Reactjs: How to create a function with args inside a component

【发布时间】：2022-01-08 15:09:23

【问题描述】：

在 React 中，有时组件内部有一个函数，用于当项目为 active 或 pressed 时，如下面的 Pressable。在函数的 args 中的对象内部可以使用 pressed 变量时，如何重新创建这种模式？

<Pressable onPress= () => null >
   ( pressed ) => (
    <Text>pressed ? "Pressed!" : "Press Me"</Text>
  )
</Pressable>

我的尝试失败了

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

const Component = ( children ) => 
  // Not sure how active should be passed down to children
  // via a useContext maybe? Is that the only way?
  const [active, setActive] = React.useState(true);

  return <View>children</View>;
;

export default function App() 
  return (
    <View>
      <Component>
        (active) => (
          <Text>
            active ? "Active" : "Not active"
          </Text>
        )
      </Component>
    </View>
  );

【参考方案1】：

将命名函数表达式作为子组件传递给组件

import  StyleSheet, View, Text  from 'react-native'

const Component = ( children ) => 

  const [active, setActive] = React.useState(true);

  return <View>children(active)</View> ;
;

export default function App() 
  const demo = (active) => (
    <Text>
      active ? "Active" : "Not active"
    </Text>
  );
  return (
    <View>
      <Component>
        demo
      </Component>
    </View>
  );