如何从js函数中调用组件函数？

从js函数中调用组件函数可以通过以下几种方式实现：

通过props传递函数：在组件中定义一个函数，并将其作为props传递给子组件。子组件可以通过props接收到该函数，并在需要的时候调用它。

示例代码：

// 父组件
function ParentComponent() {
  const handleClick = () => {
    console.log('Parent component function called');
  };

  return (
    <ChildComponent handleClick={handleClick} />
  );
}

// 子组件
function ChildComponent(props) {
  const { handleClick } = props;

  const handleButtonClick = () => {
    handleClick();
  };

  return (
    <button onClick={handleButtonClick}>Call Parent Function</button>
  );
}

使用React的ref：通过在组件中使用ref，可以获取到组件的实例，并直接调用其方法。

示例代码：

// 组件
class MyComponent extends React.Component {
  myFunction() {
    console.log('Component function called');
  }

  render() {
    return (
      <div>My Component</div>
    );
  }
}

// 使用ref调用组件函数
function callComponentFunction() {
  const componentRef = useRef(null);

  const handleClick = () => {
    componentRef.current.myFunction();
  };

  return (
    <div>
      <MyComponent ref={componentRef} />
      <button onClick={handleClick}>Call Component Function</button>
    </div>
  );
}

使用React Hooks：通过使用useState或useRef等Hooks，可以在函数组件中保存组件实例或函数，并在需要的时候调用。

示例代码：

// 组件
function MyComponent() {
  const myFunction = () => {
    console.log('Component function called');
  };

  return (
    <div>My Component</div>
  );
}

// 使用Hooks调用组件函数
function callComponentFunction() {
  const [component, setComponent] = useState(null);

  const handleClick = () => {
    component.myFunction();
  };

  useEffect(() => {
    setComponent(<MyComponent />);
  }, []);

  return (
    <div>
      {component}
      <button onClick={handleClick}>Call Component Function</button>
    </div>
  );
}

以上是从js函数中调用组件函数的几种常见方法，具体选择哪种方法取决于你的项目需求和代码结构。