如何调用 function 在 React Native 的自定义组件中设置外部变量？

Question

我对 React 还是很陌生，但随着我的学习，我正在尝试创建可重用的组件。 我被困在一个广播组。 除了从组件中提取密钥到我的正常代码中的变量之外，我拥有一切。

我的组件如下所示：

import React, {useState, useEffect} from "react"
import {Text, TouchableOpacity, View} from "react-native"
import PropTypes from "prop-types"

import * as colors from "../defines/js_colors"

import RN_button from "./RN_button"

function RN_radioGroup(props) {
  const [radioSelect, setRadioSelect] = useState("RN_button")
  // useEffect(() => {}, [radioSelect])

  return (
    <View>
      {props.radioGroupList.map((item) => {
        return (
          <View key={item.key}>
            <RN_button
              buttonText={item.label}
              darkBackgroundColor={radioSelect == item.key ? colors.white : "transparent"}
              darkBorderColor={colors.white}
              darkTextFontColor={colors.textLightBlue}
              // onPress = data => setState({ radioSelect });
              onPress={() => {
                setRadioSelect(item.key)
              }}
            />
          </View>
        )
      })}
    </View>
  )
}

RN_radioGroup.propTypes = {
  radioGroupList: PropTypes.array.isRequired,
}

export default RN_radioGroup

RN_button 是自定义按钮组件，但在这里并不重要。 radioGroupList 是一个数组，其中包含一个键和一个 label，我将其作为道具传递，colors 包含不同 colors 的定义。

function screen({navigation}) {
  const [radioValue, setRadioValue] = useState("NULL")
  return (
    <View style={styles.container}>
      <View style={styles.container}>
        <RN_radioGroup radioGroupList={arrays.radioGroup1} onPress={radioValue} />
      </View>
    </View>
  )
}

我需要使用屏幕外部无线电组中的选定键值。 屏幕代码被精简为所需的基本内容，但无线电组 class 完全如图所示。

谢谢你的帮助。

Answer 1

几乎任何反应的答案通常是以下两件事之一：

1. 不要突变 state（此处不适用）。
2. 抬起 state （这里的答案）。

您需要将所选值设置为screen和RN_radioGroup组件的共同祖先 - 将其作为 state 放在screen组件中似乎就足够了。

不要将[radioSelect,setRadioSelect]作为RN_radioGroup state 的一部分，而是将其作为道具传递。

它看起来像这样，您将selected的道具传递给RN_radioGroup这将是选择的值。

function screen({navigation}) {
  const [radioValue, setRadioValue] = useState("NULL")
  return (
    <View style={styles.container}>
      <View style={styles.container}>
        <RN_radioGroup radioGroupList={arrays.radioGroup1} selected={radioValue} onPress={setRadioValue} />
      </View>
    </View>
  )
}

// RN_radioGroup

function RN_radioGroup(props) {
  // the selected value, and the update function are now passed in as props 
  const { selected, onPress, radioGroupList } = props;

  return (
    <View>
      {radioGroupList.map((item) => {
        return (
          <View key={item.key}>
            <RN_button
              buttonText={item.label}
              darkBackgroundColor={radioSelect == item.key ? colors.white : "transparent"}
              darkBorderColor={colors.white}
              darkTextFontColor={colors.textLightBlue}
              { /* onPress, call the updater function, which I've also coincidentally named onPress */ }
              onPress={() => onPress(item.key)}
            />
          </View>
        )
      })}
    </View>
  )
}

Answer 2

基本思想是您将 state 向上提起，这意味着您应该将[radioSelect,setRadioSelect]放在包含RN_radioGroup的组件中

不知何故像这样

// my screen
function screen({navigation}) {
  const [radioValue, setRadioValue] = useState("NULL")
  return (
    <View style={styles.container}>
      <View style={styles.container}>
        <RN_radioGroup 
          radioGroupList={arrays.radioGroup1} 
          selected={radioValue} 
          onSelect={setRadioValue} />
      </View>
    </View>
  )
}

// your RN_radioGroup

function RN_radioGroup(props) {
  // you destructure the props to get these values
  // you use these to change the selected value
  const {selected, onSelect} = props;

  return (
    <View>
      {props.radioGroupList.map((item) => {
        return (
          <View key={item.key}>
            <RN_button
              buttonText={item.label}

              // you compare the value if it is selected here
              darkBackgroundColor={selected == item.key ? colors.white : "transparent"}
              darkBorderColor={colors.white}
              darkTextFontColor={colors.textLightBlue}
              onPress={() => {
                onSelect(item.key)
              }}
            />
          </View>
        )
      })}
    </View>
  )
}