React Native 父子组件间通信

Author Avatar
XibHe 6月 20, 2019
  • 在其它设备中阅读本文章

props

父组件->子组件,父组件调用并传值给子组件

父组件通过 props 把数据传给子组件,子组件通过 this.props 去使用相应的数据。例如,在父组件标签中定义 props 及对应的值,

<DishesLeftList
    ref={this.leftListRef}
    saleClassTwoData={saleClassTwoData}
    setSaleClassTwoId={this.selectClassTwoClick.bind(this)}
/>

在子组件中解构获取 props 传递过来的值并赋给对应的组件

render () {
   const { saleClassTwoData } = this.props
    return (
        <View style={styles.container}>
            <FlatList
             data={saleClassTwoData}
             renderItem={({ item, index }) => this.renderItem(item, index)}
             keyExtractor={(item) => item.id}
            />
        </View>
    )
}

ref

父组件可以通过使用 ref 来直接调用子组件实例的方法,

  1. 在 constructor 定义一个全局变量,并创建 ref
this.leftListRef = React.createRef()
  1. 将 1 中定义的 this.leftListRef 以属性形式传递给子组件,
<DishesLeftList
    ref={this.leftListRef}
/>
  1. 在父组件中通过 this.leftListRef 调用子组件中的函数并传递参数
refreshSKUListForSwitch = (position) => {
    const { saleClassOneData, saleClassTwoData } = this.state
     // 切换二级分类
    this.leftListRef.current.setSelectItem(this._classTwoIndex - 1)
}

其中,setSelectItem 为子组件 DishesLeftList 中定义的函数。

–EOF–

若无特别说明,本篇文章均为原创,转载请保留链接,谢谢!