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

我还是个新手，但随着我的学习，我正在尝试创建可重用组件。我被困在一个广播组里。除了在我的普通代码中将键从组件提取到变量之外，我什么都有

我的组件如下所示：

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

import React，{useState，useffect}来自“React”
从“react native”导入{Text，TouchableOpacity，View}
从“道具类型”导入道具类型
从“./defines/js_colors”导入*作为颜色
从“/RN_按钮”导入RN_按钮
职能RN_放射组（道具）{
const[radioSelect，setRadioSelect]=useState（“RN_按钮”）
//useEffect（（）=>{}，[radioSelect]）
返回(
{props.radiogroup.list.map（（项）=>{
返回(
设置状态（{radioSelect}）；
onPress={（）=>{
setRadioSelect（项.键）
}}
/>
)
})}
)
}
RN_radioGroup.propTypes={
RadioGroup列表：需要PropTypes.array.isRequired，
}
导出默认RN\U放射组

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

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>
  )
}

功能屏幕（{navigation}）{
常量[radioValue，setRadioValue]=useState（“空”）
返回(
)
}

我需要使用屏幕上收音机组外部的选定键值。 屏幕代码被简化为所需的基本代码，但radio group类完全如图所示

---

感谢您的帮助。

react中几乎所有问题的答案通常是以下两个方面之一：

不要改变状态（此处不适用）

提升状态（这里的答案）

您需要将所选值添加到

屏幕

和

RN_radioGroup

组件的共同祖先中-将其作为状态添加到

屏幕

组件中似乎就足够了

不要将

[radioSelect，setRadioSelect]

作为

RN\u radioGroup

状态的一部分，而是将其作为道具传入

您将

selected

的prop传递给

RN\u radioGroup

，这将是所选的值

功能屏幕（{navigation}）{
常量[radioValue，setRadioValue]=useState（“空”）
返回(
)
}
//RN_放射组
职能RN_放射组（道具）{
//选定的值和更新函数现在作为道具传入
const{selected，onPress，radiogroup}=props；
返回(
{radiogroup list.map（（项）=>{
返回(
基本思想是将状态提升，这意味着您应该将
[radioSelect，setRadioSelect]
放在包含
RN\u radioGroup

像这样

//我的屏幕
功能屏幕（{navigation}）{
常量[radioValue，setRadioValue]=useState（“空”）
返回(
)
}
//你的RN_放射组
职能RN_放射组（道具）{
//您可以分解道具以获得这些值
//您可以使用这些更改选定的值
const{selected，onSelect}=props；
返回(
{props.radiogroup.list.map（（项）=>{
返回(
{
onSelect（item.key）
}}
/>
)
})}
)
}
我理解你在这里解释的想法，但我不知道如何实现。我看到了一些提升状态的示例，它们与我的实现完全不同。每当我尝试实现它时，我都会收到一个错误，说我无法“从不同组件的函数bod内部更新组件”。你能给我一个例子说明在radio group类中应该做什么，或者甚至给我一个好的例子来解释这种类型的实现吗？谢谢你到目前为止的帮助。@HeinK我的编辑似乎不知道这是否有意义。谢谢你的评论。Adam编辑了他以前的评论，你们两个都给了我同样的建议，但我还是很感激你的回答。