ReactJS 转发参考

ReactJS 是一个用于构建用户界面的 JavaScript 库，它只关注于组件的构建，使得页面的视图层构建和渲染变得简单而高效。在 React 中，你只需要关注数据的输入输出，无需关心其中的具体实现。React 组件可以被复用，在不同的应用场景中用于构建不同的用户界面。

React 转发

React 转发，是一种 React 组件复用的功能。通过转发机制，父组件向子组件传递参数，在子组件中实现某个功能。React 转发可以大大减少代码的重复，提高代码的可维护性。

示例

下面是一个使用 React 转发实现组件重用的例子：

import React from 'react';

const Child = React.forwardRef((props, ref) => (
  <button onClick={props.onClick} ref={ref}>
    {props.children}
  </button>
));

class Parent extends React.Component {
  handleClick = () => {
    console.log('Clicked');
  }

  render() {
    return (
      <Child onClick={this.handleClick}>Click me</Child>
    );
  }
}

在这个例子中，我们定义了一个 Child 组件，并使用 React.forwardRef 方法对其进行转发。此时 Child 组件就可以与其他 React 组件一样使用 ref 进行引用。然后在 Parent 组件中，我们通过向 Child 组件传递参数，实现了组件的复用。

代码解释

上述示例代码中可以分为如下几部分：

1. 导入 React 库

import React from 'react';

2. 使用 React.forwardRef 方法对 Child 组件进行转发

const Child = React.forwardRef((props, ref) => (
  <button onClick={props.onClick} ref={ref}>
    {props.children}
  </button>
));

这个转发的过程实际上是创建了一个新的组件。这个新组件包装了原先的 Child 组件，同时赋予了 ref 的能力。在 render 方法中通过 {...props} 将传递给 Child 组件的其他属性进行传递。这个新组件后续可以像普通组件一样使用。

3. 在 Parent 组件的 render 方法中使用在转发过程中创建的 Child 组件

class Parent extends React.Component {
  handleClick = () => {
    console.log('Clicked');
  }

  render() {
    return (
      <Child onClick={this.handleClick}>Click me</Child>
    );
  }
}

在这里，我们通过 onClick 属性向 Child 组件传递了点击事件的处理函数，并在 Child 组件中进行了事件的绑定。同时传递了 children 属性，用于展示组件的文本内容。

参考链接

• React 转发官方文档