Как выполнить функцию дочернего компонента из родительского компонента в React

Чтобы выполнить функцию из дочернего компонента, вам нужно будет использовать Refs. React поддерживает специальный атрибут, который вы можете прикрепить к любому компоненту, то есть ref атрибут, он принимает функцию обратного вызова, и вы можете получить доступ к функциям дочернего компонента в родительском доступе this.refs.REF_NAME.METHOD_NAME,

Мы собираемся создать родительский элемент, он будет визуализировать составная часть. Как видите, компонент, который будет отображаться, нужно добавить ref атрибут и укажите имя для него. Затем triggerChildAlert Функция, расположенная в родительском классе, получит доступ к свойству refs этого контекста (когда триггерная функция triggerChildAlert получит доступ к дочерней ссылке, и у нее будут все функции дочернего элемента).

class Parent extends React.Component {
triggerChildAlert(){
this.refs.child.showAlert();
}
render() {
return (
{/* Note that you need to give a value to the ref parameter, in this case child*/}
Click
);
}
}

Теперь дочерний компонент, как теоретически разработано ранее, будет выглядеть так:

class Child extends React.Component {
showAlert() {
alert('Hello World');
}
render() {
return (
Hello
);
}
}

showAlert метод является единственным методом, который будет доступен в this.refs.child в родительском компоненте.

пример

Если вы плохо поняли предыдущий пример, вы можете проанализировать следующую реализацию. В этом примере мы собираемся использовать материал-интерфейс и 2 его компонента, ящик и кнопку. Пользовательский ящик будет находиться в дополнительном файле Drawer.js:

// Drawer.js
import React from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
export default class DrawerMain extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
}
// Shows or hide the Drawer
handleToggle = () => this.setState({open: !this.state.open});
// Closes the drawer
handleClose = () => this.setState({open: false});
render() {
return (
this.setState({open})}
>
Menu Item
Menu Item 2
);
}
}

Ничего особенного, на что нам нужно обратить внимание, handleToggle метод доступен только в компоненте Drawer, однако мы не собираемся добавлять какие-либо кнопки внутри компонент, нам нужно каким-то образом получить доступ к этим методам, в противном случае мы не могли бы использовать Drawer. Поэтому в нашем Компонент, мы собираемся добавить простую кнопку, которая покажет ящик и получит доступ к методу handleToggle в составная часть:

import React, {Component} from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/image/add-a-photo';
// Import the drawer component previously created as DrawerMain
import DrawerMain from './Drawer';
class Main extends Component {
constructor(props, context) {
super(props, context);
}
handleDrawer = () => {
// Access the handleToggle function of the drawer reference
this.refs.customDrawerReference.handleToggle();
}
render() {
return (
{/* Add the Drawer and create the "drawer" reference */}
{/* The button that will open the drawer onTouchTap (click or whatever) */}
);
}
}
export default Main;

Если вы хотите больше информации об атрибуте ref, прочитайте официальную документацию по реакции здесь. Удачного кодирования!