React - как вызвать функцию-родитель от внука - PullRequest
Новая
       60

React - как вызвать функцию-родитель от внука

0 голосов
/ 26 мая 2020

Я делаю фото, чтобы продемонстрировать, вы можете посмотреть на него:

react

Мой родительский компонент - 1, главный дочерний компонент - 3, на 2 Я могу кое-что сделать, потому что это родитель-потомок, но я не могу вызвать функцию 1, когда смотрю из 3, любой ваш интерес, спасибо!

1 Ответ

2 голосов
/ 27 мая 2020

вы должны передавать реквизиты от ребенка к внуку

вот пример (я использую react native)

Parent. js

import React, { Component } from 'react';
import Child from './Child';
import { Button, Text, View } from 'react-native';

export default class Parent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      result: 'original state'
    }
  }
  stateUpdate(data) {
    this.setState({result:data})
  }

  render() {
  return  (
    <View>
      <Text>parent state: {this.state.result}</Text>
      <Button
        onPress={() => this.stateUpdate('original state')}
        title="original state"
        color="darkgreen"
      />
      <Child data={this.state.result} updateState={(data) => this.stateUpdate(data)} />
    </View>
    )
  }
 }

Child. js

import React, { Component } from 'react';
import GrandChild from './GrandChild';
import { Button, Text, View } from 'react-native';

export default class Child extends Component {

  constructor(props) {
    super(props);
  }
  render() {
  return  (
    <View>
        <Text style={{height:20}} />
        <Text>child prop: {this.props.data}</Text>
        <Button
          onPress={() => this.props.updateState('Changed from Child')}
          title="change parent state"
          color="#841584"
        />
        <GrandChild data={this.props.data} updateParent={(data) => this.props.updateState(data)} />
    </View>
    )
  }
 }

GrandChild. js

import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';

export default class GrandChild extends Component {

  constructor(props) {
    super(props);
  }
  render() {
      return  (
        <View>
            <Text style={{height:20}} />
            <Text>GrandChild prop: {this.props.data}</Text>
            <Button
              onPress={() => this.props.updateParent('change from GrandChild')}
              title="change parent state"
              color="darkblue"
            />
        </View>
    )
  }
 }

вот закуска https://snack.expo.io/GsuAf65kK

или используйте context api.

надеюсь, это поможет.

...