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

为了从子组件执行功能, 你将需要使用引用。 React支持一个特殊属性, 你可以将其附加到任何组件, 即ref属性, 它具有回调函数, 并且你可以通过访问this.refs.REF_NAME.METHOD_NAME来访问父组件中子组件的功能。
【如何在React中从父组件执行子组件功能】我们将创建一个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.jsimport 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 DrawerhandleToggle = () => this.setState({open: !this.state.open}); // Closes the drawerhandleClose = () => this.setState({open: false}); render() {return (< div> < Drawerdocked={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 DrawerMainimport DrawerMain from './Drawer'; class Main extends Component {constructor(props, context) {super(props, context); } handleDrawer = () => {// Access the handleToggle function of the drawer referencethis.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属性的更多信息, 请在此处阅读官方文档。编码愉快！