Javascript 将状态从组件传递到模态？

我有一个组件并将其导入到特定屏幕中，在这个屏幕中，当我单击“打开模式包含组件”时，我有一个按钮，它是一个录音机，所以在我录制语音后，我想将此语音作为状态或其他内容保存到父屏幕中

在recorder组件中，我将语音数据保存到状态！但我如何才能将其传递到其他父屏幕！？ 那我怎么处理呢

这是照片

单击“添加语音”后的父屏幕显示模式

下面是一个包含记录器组件的模式

代码

组成部分

我将数据传递到componentDidMount内的PassDataToModal状态

父屏幕

import Modal from 'react-native-modal';
import RecorderScreen from './Recorder';

class Order extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false,
    };
  }

  toggleModal = () => {
    this.setState({isModalVisible: !this.state.isModalVisible});
  };
 render() {
    return (
      <View style={styles.container}>
          <TouchableOpacity
            onPress={this.toggleModal}
           >
            <Icon name="mic" color="#333" size={20} />
            <Text style={{paddingHorizontal: 5}}>Add Voice</Text>
          </TouchableOpacity>
         <Modal
           style={{margin: 0}}
           isVisible={this.state.isModalVisible}
         >
           <View>
              <TouchableOpacity onPress={this.toggleModal}>
                <Icon name="close" color="#000" size={25} />
              </TouchableOpacity>

              <RecorderScreen /> // Component

            </View>
        </View>
     )
  }
}

---

在父组件中，向记录器屏幕组件传递一个函数，该函数将向上发送必要的数据

所以在你的父母身上，你会有这样的东西：

setData=data=>{ //将其设置为需要命名的任何名称 this.setState{childData:data}； } 然后将函数作为道具传递：

最后，如果我遵循如下代码，则在需要的情况下在孩子中调用它：

组件安装{ AudioRecorder.requestAuthorization.TheniAuthorized=>{ this.setState{hasPermission:isAuthorized}； AudioRecorder.onFinished=数据=>{ this.props.setDatadata； }; }; }

---

然后，您的父组件将有权访问您已获取的子组件的数据。

请尝试将您的帖子限制在说明您所面临问题所需的特定/最低代码量。我在这里甚至找不到模态成分谢谢，@ChrisB。你能再检查一次吗？很好，这是工作，现在只是为了理解，如果我有一个数据，我想把它传递给家长，我只需在我的子组件和家长中添加这个.props.whateverdata，我就接受它，对吗？是的！我链接的文档可能比我解释得更好，所以如果你有几分钟的时间，通读该页面可能会有所帮助。这是react中一个非常重要的模式，因此值得花费一些时间来确保它是合理的Hello Brian，它应该是mater name setData function equal prop name？prop name不必与函数名匹配，只要您正确访问它，它可以是您想要的任何东西。有时候追踪道具的来源会更清晰。但情况并非总是如此，因此道具的命名取决于具体情况。

import Modal from 'react-native-modal';
import RecorderScreen from './Recorder';

class Order extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false,
    };
  }

  toggleModal = () => {
    this.setState({isModalVisible: !this.state.isModalVisible});
  };
 render() {
    return (
      <View style={styles.container}>
          <TouchableOpacity
            onPress={this.toggleModal}
           >
            <Icon name="mic" color="#333" size={20} />
            <Text style={{paddingHorizontal: 5}}>Add Voice</Text>
          </TouchableOpacity>
         <Modal
           style={{margin: 0}}
           isVisible={this.state.isModalVisible}
         >
           <View>
              <TouchableOpacity onPress={this.toggleModal}>
                <Icon name="close" color="#000" size={25} />
              </TouchableOpacity>

              <RecorderScreen /> // Component

            </View>
        </View>
     )
  }
}