如何在反应的子功能组件中编写自定义功能？答案

【问题标题】：How do I write custom function inside a child functional component in react?如何在反应的子功能组件中编写自定义功能？
【发布时间】：2021-04-02 19:42:02
【问题描述】：

让我先给你看一下我想做的代码

import React, { useEffect } from 'react';

function Child(props) {
    useEffect(()=>{
        // var minutes = props.minutes
        let minutes = "420"
        
//how to write the following function in correct manner
        function convertMinutesToHours(minutes){
            var hours = minutes / 60
            var newHour = Math.floor(hours)
            var mins = (hours - newHour) * 60;
            var newMinutes = Math.round(mins);
            return newHour +":"+newMinutes; 
        }
    });

    return (
       <div>{convertMinutesToHours}</div>
    );
}

export default Child;

这段代码是不言自明的。我怎样才能正确地做到这一点？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

如果您关心以正确的方式做事，最好从 linter 开始。

关于这段代码，convertMinutesToHours 显然在逻辑上与该组件没有关联，因为它是一个通用的辅助函数，您应该将其放在您的组件之外的同一个文件中，或者更好地对待它，移动到一个帮助文件，具有类似性质的其他功能到一个单独的文件夹：lib、util 或者你想怎么称呼它。您可能想重复使用它，所以不要将它放入组件中。

像这样：

// utils.js
export function convertMinutesToHours(minutes){
  var hours = minutes / 60
  var newHour = Math.floor(hours)
  var mins = (hours - newHour) * 60;
  var newMinutes = Math.round(mins);
  return newHour + ":" + newMinutes; 
}

// Child.js
import React, { useEffect } from 'react';
import { convertMinutesToHours } from './utils';

function Child(props) {        
    return (
       <div>{convertMinutesToHours(props.minutes)}</div>
    );
}

export default Child;

就性能优化而言，这种方法也更好。以 Aryan 在另一个答案中描述的方式将函数保留在组件内部将继续在每个组件渲染上重新创建此函数。如果您确实想像 Aryan 建议的那样将它放在组件中，至少将其包装到 useCallback 中。

话虽如此，但不要过度地将每个映射器函数包装到 useCallback 中或将其一直向上移动，这不会使您的代码更好地执行或更具可读性。

【讨论】：

您的回答很好，希望您不介意我添加了您建议的代码示例以提供帮助
谢谢@SethLutske
谢谢@AlexanderMikhalchenko，我会将其作为建议。

【解决方案2】：

import React, { useEffect } from "react";

function Child(props) {
 function convertMinutesToHours(minutes) {
  var hours = minutes / 60;
  var newHour = Math.floor(hours);
  var mins = (hours - newHour) * 60;
  var newMinutes = Math.round(mins);
  return newHour + ":" + newMinutes;
 }
 useEffect(() => {
  // var minutes = props.minutes
  let minutes = "420";
  console.log(convertMinutesToHours(minutes));
 });

  return <div>{convertMinutesToHours}</div>;
}

export default Child;

您也可以在功能组件或 Globaly 或 UseEffects 中的任何位置声明 Function。

【讨论】：

谢谢@AryanSingh 我想我在调用函数时弄错了。