如何在functional component - ReactJs中调用函数

在functional component中调用函数有几种常见的方式：

直接调用函数：在functional component中，可以直接调用定义在同一作用域内的函数。例如：

import React from 'react';

function MyComponent() {
  // 定义一个函数
  function handleClick() {
    console.log('Button clicked');
  }

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

使用React Hook - useEffect：如果需要在组件渲染完成后执行某个函数，可以使用React Hook中的useEffect。例如：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 组件渲染完成后执行的函数
    console.log('Component rendered');
  }, []);

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

通过props传递函数：如果需要在子组件中调用父组件中的函数，可以通过props传递函数。例如：

import React from 'react';

function ParentComponent() {
  // 定义一个函数
  function handleClick() {
    console.log('Button clicked');
  }

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

function ChildComponent(props) {
  return (
    <button onClick={props.onClick}>Click me</button>
  );
}

以上是在functional component中调用函数的几种常见方式。根据具体的需求和场景，选择合适的方式来调用函数。