如何在React中从父组件执行子组件功能

为了从子组件执行功能, 你将需要使用引用。 React支持一个特殊属性, 你可以将其附加到任何组件, 即ref属性, 它具有回调函数, 并且你可以通过访问this.refs.REF_NAME.METHOD_NAME来访问父组件中子组件的功能。

我们将创建一个Parent元素, 它将呈现一个<Child />组件。如你所见, 将要渲染的组件需要添加ref属性并为其提供名称。然后, 位于父类中的triggerChildAlert函数将访问此上下文的refs属性(当触发triggerChildAlert函数将访问子引用时, 它将具有子元素的所有功能)。

class Parent extends React.Component {
    triggerChildAlert(){
        this.refs.child.showAlert();
    }

    render() {
        return (
            <div>
                {/* Note that you need to give a value to the ref parameter, in this case child*/}
                <Child ref="child" />
                <button onClick={this.triggerChildAlert}>Click</button>
            </div>
        );
    }
}

现在, 按照先前的理论设计, 子组件将如下所示：

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

    render() {
        return (
            <h1>Hello</h1>
        );
    }
}

showAlert方法是唯一可在父组件的this.refs.child中使用的方法。

例子

如果你对上一个示例不太了解, 则可以分析以下实现。在此示例中, 我们将使用material-ui及其两个组件, 即抽屉和按钮。自定义抽屉将位于一个额外的文件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 (
            <div>
                <Drawer
                    docked={false}
                    width={200}
                    open={this.state.open}
                    onRequestChange={(open) => this.setState({open})}
                >
                    <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem>
                    <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
                </Drawer>
            </div>
        );
    }
}

没什么特别我们需要注意的, handleToggle方法仅可在Drawer组件中使用, 但是由于我们不会在<Drawer />组件内添加任何按钮, 因此我们需要某种方式访问​​这些方法, 否则我们将无法不要使用抽屉。因此, 在</ Main>组件中, 我们将添加一个简单的按钮, 该按钮将显示抽屉并访问<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 (
            <MuiThemeProvider muiTheme={muiTheme}>
                <div>
                    {/* Add the Drawer and create the "drawer" reference */}
                    <DrawerMain ref="customDrawerReference"/>

                    {/* The button that will open the drawer onTouchTap (click or whatever) */}
                    <FloatingActionButton style={style} onTouchTap={this.handleDrawer}>
                        <ContentAdd />
                    </FloatingActionButton>
                </div>
            </MuiThemeProvider>
        );
    }
}

export default Main;

如果你想要有关ref属性的更多信息, 请在此处阅读官方文档。编码愉快！