在 React.js 中调用外部组件方法

2020-10-10 08:00:00 · 飞浪

在本指南中，我们将了解如何使用 props 作为传递以及调用外部组件方法的手段。

介绍

随着应用程序的增长，React.js 组件会变得越来越复杂。在大多数情况下，您将拥有嵌套组件（由其他组件调用的组件）。这些嵌套组件可能包含通过调用父组件中的方法来强制父组件中的状态更改的操作。在本指南中，我们将了解如何使用props作为传递和调用外部组件方法的手段。

设置

假设有两个组件，一个BannerMessage和一个 Editor。BannerMessage是一个维护一个名为message 的状态变量的组件：

      import React from 'react';
import Editor from './Editor';

export default class BannerMessage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: ""
    }
  }

  updateMessage(message) {
    this.setState({
      message: message
    });
  }

  render() {
    return (
      <div>
        <h1>
          {this.state.message}
        </h1>
        <hr/>
        <Editor
          updateMessage={this.updateMessage.bind(this)}
        />
      </div>
    );
  }
}
    

注意，它包含一个名为updateMessage的方法，该方法接受一个消息值，该消息值将更新为组件的状态消息。在render()方法中，Editor与属性updateMessage一起安装，其值为this.updateMessage.bind(this)。调用.bind(this)将允许保留指向BannerMessage组件实例的this，即使它被传递给Editor。

另一方面，编辑器如下所示：

      import React from 'react';

export default class Editor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: ""
    }
  }

  handleMessageChanged(event) {
    this.setState({
      message: event.target.value
    });
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.message} onChange={this.handleMessageChanged.bind(this)} />
        <button>
          Save Message
        </button>
      </div>
    );
  }
}
    

该组件维护自己的状态消息，每次用户修改其输入元素的值时都会更新该消息。

调用外部组件的方法

在编辑器中，创建一个方法，作为按钮被点击时的事件处理程序：

      handleButtonClicked() {
  this.props.updateMessage(this.state.message);
}
    

请注意，代码可以调用组件的props ，而组件又会调用updateMessage并在其状态中传递Editor的消息值。在此上下文中对updateMessage的调用是由BannerMessage传递的：

      <Editor
  updateMessage={this.updateMessage.bind(this)}
/>
    

将事件处理程序附加到Editor中的按钮的onClick事件：

      <button onClick={this.handleButtonClicked.bind(this)}>
  Save Message
</button>
    

当按钮被点击时，它将从组件的 props 中调用updateMessage ，它是对传递它的父级updateMessage ( BannerMessage )的引用。

总体代码

最终代码应如下所示：

横幅信息

      import React from 'react';
import Editor from './Editor';

export default class BannerMessage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: ""
    }
  }

  updateMessage(message) {
    this.setState({
      message: message
    });
  }

  render() {
    return (
      <div>
        <h1>
          {this.state.message}
        </h1>
        <hr/>
        <Editor
          updateMessage={this.updateMessage.bind(this)}
        />
      </div>
    );
  }
}
    

编辑

      import React from 'react';

export default class Editor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: ""
    }
  }

  handleMessageChanged(event) {
    this.setState({
      message: event.target.value
    });
  }

  handleButtonClicked() {
    this.props.updateMessage(this.state.message);
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.message} onChange={this.handleMessageChanged.bind(this)} />
        <button onClick={this.handleButtonClicked.bind(this)}>
          Save Message
        </button>
      </div>
    );
  }
}
    

结论

props是 React.js 组件的一个特殊成员，它保存从另一个组件调用组件时传递的值。props的键声明为 HTML 属性，最终成为被调用组件内可访问的引用。一种这样的应用是将引用传递给调用组件的方法，以便由子组件调用，从而触发父级的逻辑。这将允许组件间通信，同时保持每个组件的状态独立性。为了练习，除了onClick事件外，尝试看看是否可以从Editor的onChange事件处理程序中挂接BannerMessage的updateMessage调用。这样，用户不必单击按钮，Editor就可以与BannerMessage通信。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 React.js 中调用外部组件方法

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; import Editor from './Editor'; export default class BannerMessage extends React.Component { constructor(props) { super(props); this.state = { message: "" } } updateMessage(message) { this.setState({ message: message }); } render() { return ( <div> <h1> {this.state.message} </h1> <hr/> <Editor updateMessage={this.updateMessage.bind(this)} /> </div> ); } }

import React from 'react'; export default class Editor extends React.Component { constructor(props) { super(props); this.state = { message: "" } } handleMessageChanged(event) { this.setState({ message: event.target.value }); } render() { return ( <div> <input type="text" value={this.state.message} onChange={this.handleMessageChanged.bind(this)} /> <button> Save Message </button> </div> ); } }

import React from 'react'; export default class Editor extends React.Component { constructor(props) { super(props); this.state = { message: "" } } handleMessageChanged(event) { this.setState({ message: event.target.value }); } handleButtonClicked() { this.props.updateMessage(this.state.message); } render() { return ( <div> <input type="text" value={this.state.message} onChange={this.handleMessageChanged.bind(this)} /> <button onClick={this.handleButtonClicked.bind(this)}> Save Message </button> </div> ); } }