Reactjs 将本机道具反应到父组件

首先，我很抱歉，我是一个新手

我和react navigation有一个项目，他们展示了这个组件

import React, { Component } from 'react';
import {FlatList,StyleSheet,View,TouchableHighlight,Text} from 'react-native'
import {
  Container,
  Button,
  ListItem,
  Left,
  Right,
  Icon,
  Body
} from 'native-base';
import Customer from '../Customer';
import Search from '../../../components/Search'


export default class SearchCustomer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      customerList:[]
    }
  }



  render() {
    return (
      <Customer>
        <Search
          setCustomerList = {(customerList) => {this.setState({customerList})}}
        />
        <FlatList
            data={this.state.customerList}
            keyExtractor={item => item.id}
            renderItem={({ item, index}) => (
              <ListItem onPress={(item) => this.props.callback()}>
                <Left style={styles.left}>
                    <Text>{item.firstname} {item.lastname}</Text>
                    <Text style={styles.subtitle}>{item.email}</Text>
                </Left>
                <Right>
                  <Icon name='arrow-forward' />
                </Right>
              </ListItem>
        )}/>
      </Customer>
    )
  }
}

import React，{Component}来自'React'；
从“react native”导入{FlatList，StyleSheet，View，TouchableHighlight，Text}
进口{
集装箱，
按钮
列表项，
左边
正确的，
偶像
身体
}来自“本土基地”；
从“../Customer”导入客户；
从“../../../components/Search”导入搜索
导出默认类SearchCustomer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
客户列表：[]
}
}
render（）{
返回(
{this.setState（{customerList}}}
/>
项目id}
renderItem={（{item，index}）=>(
this.props.callback（）}>
{item.firstname}{item.lastname}
{item.email}
)}/>
)
}
}

该组件在下面调用其父级

import React, { Component } from 'react';
import {
  Container,
  Button,
  Text,
} from 'native-base';
import Order from '../Order';

export default class Customer extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() {
    return (
      <Order>
        {this.props.children}
      </Order>
    )
  }
}

import React，{Component}来自'React'；
进口{
集装箱，
按钮
文本，
}来自“本土基地”；
从“../Order”导入订单；
导出默认类客户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
render（）{
返回(
{this.props.children}
)
}
}

我想知道如何使用此配置将数据从孩子发送到他的父母

目前，我正在尝试在父级中捕获

this.props.callback（）

，但我无法使用此

callback={（）=>{console.log（'Ok'）}

我有这个错误

---

有人有一个解决方案吗？

阅读此内容以获得更好的理解：

阅读此内容以获得更好的理解：

使用您的一些类，您可以在父类中定义一个方法，然后将函数作为道具传递给子类

export default class Customer extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  callback = (data) => { console.log(data) } 

  render() {
    return (
      <Order callback={this.callback}>
        {this.props.children}
      </Order>
    )
  }
}

导出默认类客户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
回调=（数据）=>{console.log（数据）}
render（）{
返回(
{this.props.children}
)
}
}

然后从child可以在回调中为parent提供数据

export default class Order extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }


  render() {
    return (
      <TouchableOpacity onPress={() => this.props.callback('hi')}>
        <Text>Click Me!</Text>
      </TouchableOpacity >
    )
  }
}

导出默认类顺序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
render（）{
返回(
this.props.callback（'hi'）}>
点击我！
)
}
}

使用一些类，您可以在父类中定义一个方法，然后将函数作为道具传递给子类

export default class Customer extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  callback = (data) => { console.log(data) } 

  render() {
    return (
      <Order callback={this.callback}>
        {this.props.children}
      </Order>
    )
  }
}

导出默认类客户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
回调=（数据）=>{console.log（数据）}
render（）{
返回(
{this.props.children}
)
}
}

然后从child可以在回调中为parent提供数据

export default class Order extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }


  render() {
    return (
      <TouchableOpacity onPress={() => this.props.callback('hi')}>
        <Text>Click Me!</Text>
      </TouchableOpacity >
    )
  }
}

导出默认类顺序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
render（）{
返回(
this.props.callback（'hi'）}>
点击我！
)
}
}

您将SearchCustomer类更改为Order，在我的示例中，Order是Customer类的父类，Customer是call on SearchCustomer。您的示例是有效的，但这根本不是我当前的问题在searchCustomer组件中使用this.props.callback意味着您将回调函数作为prop to searchCustomer。我刚才提供了一个跟踪，您可以将数据传递回父组件的函数。您可以更改订单的SearchCustomer类，在我的示例中，订单是Customer类的父级，客户是调用SearchCustomer。您的示例是有效的，但这根本不是我当前的问题在searchCustomer组件中使用this.props.callback意味着您将回调函数作为prop to searchCustomer。我只是提供了一个后续教程，您可以将数据传递回父组件的函数。本教程很棒，但我没有看到通过

This.props.children

加载组件时的回调数据。本教程很棒，但我没有看到通过

This.props.children

加载组件时的回调数据