Javascript 在React Native中的两个组件之间传递数据

我有一个组件，它封装了三个组件，其中一个是

DrawerLayoutAndroid

。现在我想将抽屉的引用从抽屉组件传递到主组件，然后再传递到标头组件，这样我就可以从标头组件触发它

我不知道怎么做

下面是主要组件“cases.js”

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Header from '@components/header';
import BottomBar from '@components/bottom-bar';
import SideBar from '@components/drawer';

export default class Cases extends Component {

  state = {
    title : 'Cases'
  }

  change_text = () => {

    this.setState({ title : 'Test' })

  }

  open_drawer = (ref) => {

    ref.openDrawer();

  }

  close_drawer = (ref) => {

    ref.closeDrawer();

  }

  render() {

    return (

      <SideBar style={ styles.container }>

        <Header title={ this.state.title } change_text={ this.change_text } open={ this.state.side_bar } />

        <View style={ styles.body }>

          <Text style={ styles.text }> { this.state.name } </Text>

          <TouchableOpacity onPress={ () => this.change_text() } style={ styles.button }>

            <Text> Change State </Text>

          </TouchableOpacity>

        </View>

        <BottomBar ref={ this.state.side_bar } />

      </SideBar>

    )

  }

}

const styles = StyleSheet.create({
  container : {
    flex : 1,
    flexDirection: 'column',
  },
  body : {
    flex : 1,
    backgroundColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text : {
    color : '#fff'
  },
  button : {
    backgroundColor : '#eee',
    paddingVertical: 5,
    paddingHorizontal: 10
  }
})

import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableOpacity}；
从“@components/Header”导入标题；
从“@components/BottomBar”导入BottomBar；
从“@components/drawer”导入侧边栏；
导出默认类案例扩展组件{
状态={
标题：“案例”
}
更改文本=（）=>{
this.setState（{title:'Test'}）
}
打开抽屉=（参考）=>{
参考openDrawer（）；
}
关闭抽屉=（参考）=>{
参考closeDrawer（）；
}
render（）{
返回(
{this.state.name}
this.change_text（）}style={styles.button}>
改变状态
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
},
正文：{
弹性：1，
背景颜色：“#ccc”，
为内容辩护：“中心”，
对齐项目：“中心”
},
正文：{
颜色：'#fff'
},
按钮：{
背景颜色：“#eee”，
填充垂直：5，
水平方向：10
}
})

这是我的标题：

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';

export default class Header extends Component {

  change_text = () => {

    this.props.change_text();

  }

  open = ()

  render () {

    return (

      <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#a4d294', '#3ac6f3']} style={ styles.header }>

          <TouchableOpacity onPress={ () => this.props.change_text() }>

            <Image source={ require('@media/images/add.png') } style={ styles.add_button } />

          </TouchableOpacity>

          <Text style={ styles.title }> { this.props.title } </Text>

          <TouchableOpacity onPress={ () => this.props.open() }>

            <Image source={ require('@media/images/more.png') } style={ styles.more_button } />

          </TouchableOpacity>

      </LinearGradient>

    )

  }

}

const styles = StyleSheet.create({
  header : {
    height: 70,
    backgroundColor: '#eee',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  title : {
    color : '#fff',
    textAlign: 'center',
    fontSize: 20,
    letterSpacing: 3
  },
  add_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  },
  more_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  }
})

import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableOpacity、图像}；
从“DroperLayoutAndroid”导入DroperLayoutAndroid；
从“反应本机线性渐变”导入LinearGradient；
导出默认类头扩展组件{
更改文本=（）=>{
this.props.change_text（）；
}
开放=（）
渲染（）{
返回(
this.props.change_text（）}>
{this.props.title}
this.props.open（）}>
)
}
}
const styles=StyleSheet.create({
标题：{
身高：70，
背景颜色：“#eee”，
flexDirection:'行'，
justifyContent:'之间的空间'，
对齐项目：“中心”
},
标题：{
颜色：“#fff”，
textAlign:'中心'，
尺寸：20，
字距：3
},
添加按钮：{
宽度：30，
身高：30，
marginHorizontal:10
},
更多按钮：{
宽度：30，
身高：30，
marginHorizontal:10
}
})

这是我的抽屉

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';

export default class Drawer extends Component {

  render () {

    const NavigationMenu = (
      <LinearGradient start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['#a4d294', '#3ac6f3']} style={{ flex: 1 }}>
        <View style={{ flex : 6, justifyContent: 'center' }}>
          <Text>He There</Text>
        </View>
      </LinearGradient>
    )

    return (

      <DrawerLayoutAndroid
        drawerWidth={250}
        drawerPosition={ DrawerLayoutAndroid.positions.Right }
        renderNavigationView={ () => NavigationMenu }
        ref={ (drawer) => this.props.ref = drawer }
      >

        { this.props.children }

      </DrawerLayoutAndroid>

    )

  }

}

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
从“DroperLayoutAndroid”导入DroperLayoutAndroid；
从“反应本机线性渐变”导入LinearGradient；
导出默认类抽屉扩展组件{
渲染（）{
常量导航菜单=(
他在那儿
)
返回(
导航菜单}
ref={（抽屉）=>this.props.ref=drawer}
>
{this.props.children}
)
}
}

我将通过一个简单的例子来回答您的问题。 让我们选取两个组件：父组件和子组件。您希望将一些消息从父级传递给子级，并在子级中发生事件时获得从子级到父级的回调

export default class Parent extends React.Component<any, any> {

  callback (paramFromChild) => {
    // implement what to do when certain event occurs in child component
  }

  render () {
    <View>
       <Child message={"some text"} callbackFromChild={this.callback}/>
    </View>
  }
}

导出默认类父类扩展React.Component{
回调（paramFromChild）=>{
//实现在子组件中发生特定事件时要执行的操作
}
渲染（）{
}
}

子组件

Interface childProps {
   message: string

   callbackFromChild(paramFromChild);
}

export default class Child extends React.Component<childProps, any> {

  render () {
    <View>
       <Button title={this.props.message} onPress={this.props.callbackFromChild("some message from child")}/>
    </View>
  }
}

接口子道具{
消息：string
callbackFromChild（paramFromChild）；
}
导出默认类子类扩展React.Component{
渲染（）{
}
}

---

通过这种方式，您可以使用道具在不同组件之间进行通信。

太好了。。它起作用了，但是如果想要将一个参数从子组件传递回父组件函数呢？我可以这样做吗？是的，你可以，你可以通过callbackromchild函数传递参数。我正在修改答案中的代码，请参考。你也应该使用bind