forwardRef跟withRouter 一起用

`forwardRef` 和 `withRouter` 都是 React 中常用的高阶组件（HOC）。

`forwardRef` 可以让我们在函数组件中使用 `ref`，而 `withRouter` 可以将 `router` 相关的 props（如 `history`、`location`、`match`）注入到组件中，使其能够获取到路由信息。

这两个 HOC 可以一起使用，例如：

import { forwardRef } from 'react';
import { withRouter } from 'react-router-dom';

const MyComponent = forwardRef((props, ref) => {
  // 使用 ref
  // ...

  // 使用 router 相关的 props
  const { history, location, match } = props;

  // ...
});

export default withRouter(MyComponent);

在这个示例中，`MyComponent` 是一个函数组件，通过 `forwardRef` 可以获取到 `ref`，通过 `withRouter` 可以获取到 `router` 相关的 props。

注意，`withRouter` 必须放在 `forwardRef` 的外面，因为 `withRouter` 会返回一个新的组件，而 `forwardRef` 是应用在最终的组件上的。

相关问题

forwardRef跟withRouter一起用ref一直是null怎么解决

如果在使用 `forwardRef` 和 `withRouter` 一起使用时，`ref` 一直为 `null`，可能是因为 `ref` 的传递有问题。

在使用 `forwardRef` 时，需要将 `ref` 传递给实际渲染的组件。如果 `withRouter` 包裹的是一个普通组件，那么可以将 `ref` 直接传递给这个组件：

import { forwardRef } from 'react';
import { withRouter } from 'react-router-dom';

const MyComponent = forwardRef((props, ref) => {
  // 使用 ref
  // ...

  // 使用 router 相关的 props
  const { history, location, match } = props;

  // ...

  return <div ref={ref}>Hello world</div>;
});

export default withRouter(MyComponent);

在这个示例中，`ref` 直接传递给了 `<div>` 元素。

如果 `withRouter` 包裹的是一个高阶组件，那么需要将 `ref` 传递给最终渲染的组件。例如：

import { forwardRef } from 'react';
import { withRouter } from 'react-router-dom';

const MyComponent = forwardRef((props, ref) => {
  // 使用 ref
  // ...

  // 使用 router 相关的 props
  const { history, location, match } = props;

  // ...

  const WrappedComponent = props => {
    return <div ref={ref}>Hello world</div>;
  };

  const WrappedComponentWithRouter = withRouter(WrappedComponent);

  return <WrappedComponentWithRouter />;
});

export default MyComponent;

在这个示例中，我们创建了一个名为 `WrappedComponent` 的组件，并将 `ref` 直接传递给了 `<div>` 元素。然后再通过 `withRouter` 包裹这个组件，并返回包裹后的组件。

无论是哪种情况，都需要确保 `ref` 被正确地传递给了最终渲染的元素或组件。

Form.create跟forwardRef一块用

`Form.create`是`antd`库中用于创建高阶组件的方法，它可以将表单组件与`antd`的表单控件进行绑定，从而方便地进行表单数据的处理。而`forwardRef`是`React`中的一个特性，用于向子组件传递父组件的`ref`，从而实现对子组件的访问。

在`antd`中，我们经常需要在表单组件中使用`ref`来获取表单数据或进行表单操作。但是直接使用`ref`来访问子组件的方法可能会出现一些问题，比如表单组件的子组件可能是`antd`的表单控件，而这些控件是被包装过的，无法直接访问。因此，我们可以使用`Form.create`来创建一个高阶组件，将表单组件与`antd`的表单控件进行绑定，并且在表单组件上进行操作时可以方便地获取到表单数据。

而`forwardRef`则可以帮助我们传递`ref`，从而实现对子组件的访问。在表单组件中，我们可以使用`forwardRef`将子组件的`ref`向上传递，从而实现对表单控件的访问。具体实现可以参考以下代码：

import { Form, Input } from 'antd';

const MyForm = Form.create()(React.forwardRef((props, ref) => {
  const { getFieldDecorator } = props.form;

  return (
    <Form>
      <Form.Item>
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Please input your username!' }],
        })(<Input ref={ref} />)}
      </Form.Item>
    </Form>
  );
}));

const App = () => {
  const inputRef = React.createRef();

  const handleSubmit = () => {
    const username = inputRef.current.state.value;
    console.log(username);
  };

  return (
    <div>
      <MyForm ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

在上面的代码中，我们使用`Form.create`创建了一个高阶组件`MyForm`，并使用`forwardRef`将`Input`组件的`ref`向上传递。在父组件`App`中，我们通过`createRef`创建了一个`ref`，并将其传递给`MyForm`组件。在提交表单时，我们可以通过`inputRef.current.state.value`来获取表单数据。