如何在已有React项目中用Office JS创建Excel加载项Custom Function

1. 组件内直接定义（仅当前组件使用） #

如果自定义函数只在单个组件内使用，直接在组件函数内部声明即可，和组件状态、UI逻辑联动更直观：

import React, { useState } from 'react';

function UserProfile() {
  // 自定义函数：格式化用户名
  const formatUserName = (firstName, lastName) => {
    return `${firstName} ${lastName}`.trim();
  };

  // 自定义函数：验证年龄状态
  const validateAge = (age) => {
    return age >= 18 ? '成年' : '未成年';
  };

  const [user, setUser] = useState({
    firstName: 'Shiv',
    lastName: 'Yadav',
    age: 25
  });

  return (
    <div>
      <h2>用户信息</h2>
      <p>全名：{formatUserName(user.firstName, user.lastName)}</p>
      <p>状态：{validateAge(user.age)}</p>
    </div>
  );
}

export default UserProfile;

2. 提取为独立工具文件（跨组件复用） #

如果多个组件需要用到相同的自定义函数，建议将其抽离到独立的工具文件中，实现模块化复用：

第一步：创建工具文件

新建src/utils/customFunctions.js，写入通用函数并导出：

// src/utils/customFunctions.js
export const formatUserName = (firstName, lastName) => {
  return `${firstName} ${lastName}`.trim();
};

export const validateAge = (age) => {
  return age >= 18 ? '成年' : '未成年';
};

第二步：在组件中导入使用

import React, { useState } from 'react';
import { formatUserName, validateAge } from './utils/customFunctions';

function UserProfile() {
  const [user, setUser] = useState({
    firstName: 'Shiv',
    lastName: 'Yadav',
    age: 25
  });

  return (
    <div>
      <h2>用户信息</h2>
      <p>全名：{formatUserName(user.firstName, user.lastName)}</p>
      <p>状态：{validateAge(user.age)}</p>
    </div>
  );
}

export default UserProfile;

3. 封装为自定义Hook（状态逻辑复用） #

如果自定义函数需要结合React的状态、副作用等Hook能力，推荐封装成自定义Hook（函数名必须以use开头，遵循Hook规则），用于复用复杂的状态逻辑：

第一步：创建自定义Hook文件

新建src/hooks/useFormInput.js：

// src/hooks/useFormInput.js
import { useState } from 'react';

export const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
    reset: () => setValue(initialValue)
  };
};

第二步：在组件中使用自定义Hook

import React from 'react';
import { useFormInput } from './hooks/useFormInput';

function LoginForm() {
  const username = useFormInput('');
  const password = useFormInput('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交用户名：', username.value);
    console.log('提交密码：', password.value);
    // 后续登录逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="用户名" {...username} />
      <input type="password" placeholder="密码" {...password} />
      <button type="submit">登录</button>
      <button type="button" onClick={() => { username.reset(); password.reset(); }}>重置</button>
    </form>
  );
}

export default LoginForm;

内容的提问来源于stack exchange，提问作者Shiv Yadav