如何在组件外面的其他地方对一个组件的状态做修改？

Question

我有一个组件如下：

export function MyComp() {
    
  const [data, setData] = useState(['1', '2', '3'])

  return (
    <div>{ data.map(...) }</div>
  )
}

我现在想要使用其他的地方对此组件MyComp的状态data做添加内容，请问应该如何做呢？是需要导出setData？

Answer 1

ref , useImperativeHandle 就是暴露给外部的方法。
其他的比如说 inject, export default inject('Store')(observer(Comp));，这个还可以拆分一个 store 的方案
或者 eventBus 应该都可以

import type { ForwardRefRenderFunction } from 'react';
import React, { forwardRef, useImperativeHandle } from 'react';

export interface CompNameRefHandle {

}

interface CompNameProps {

}

const CompName: ForwardRefRenderFunction<CompNameRefHandle,CompNameProps> = ({}, ref) => {
  useImperativeHandle(ref, () => ({
  }));

  return <></>;
};

export default forwardRef(CompName);

Answer 2

你说的其他地方要具体一点
1.如果是父组件更新这个组件 用楼上所说的 ref , useImperativeHandle；
2.如果是不想干的地方或者某些函数内更新
2.1 ：直接将 setData 挂载到 window 上；
2.2 ：可利用发布订阅模式，在这个组件订阅一个事件进行更新；
2.3 ：使用 mobx 或者 redux 第三方库