React组件返回多值问题：父组件如何获取TimerCalc的两个返回值？

问题背景 #

你原本将TimerCalc作为React组件使用，期望它返回格式化时间字符串，修改后想让它返回两个值，但发现父组件中获取到的是React元素对象而非返回的数组——这是因为React组件的返回值只能是React元素（或null/字符串等可渲染内容），不能直接返回自定义数组/对象供父组件直接读取。

原组件代码 #

TimerCalc = () => {    
  (...other calculations...)
  const formatedTime = () => {
    return [pad(parseInt(seconds / 60)), pad(seconds % 60)].join(':')
  }

  return formatedTime()
}

错误用法的本质 #

父组件中const counter = <TimerCalc resetTimer={reset} runTimer={startStopTimer} />创建的是React元素实例，不是组件内部返回的字符串或数组，所以无法通过下标直接读取值。

两种可行解决方案 #

方案1：将TimerCalc改为自定义Hook #

这是最直接的方案，因为自定义Hook的核心就是封装逻辑并返回任意类型的值。

修改后的Hook代码

// 自定义Hook必须以use开头，符合React规范
const useTimerCalc = ({ resetTimer, runTimer }) => {    
  (...保留原有的计算逻辑...)
  
  const formattedTime = [pad(parseInt(seconds / 60)), pad(seconds % 60)].join(':')
  
  // 直接返回包含两个值的数组
  return [formattedTime, secondValue]
}

父组件中使用

// 通过数组解构直接获取两个值
const [formattedTime, secondValue] = useTimerCalc({ 
  resetTimer: reset, 
  runTimer: startStopTimer 
})

// 直接使用这两个变量即可，比如渲染到页面
<div>{formattedTime}</div>
<div>{secondValue}</div>

方案2：通过回调Props传递值 #

如果必须保留组件形式（比如需要在组件内渲染内容），可以通过回调函数让子组件主动把计算结果传递给父组件。

修改后的组件代码

const TimerCalc = ({ resetTimer, runTimer, onValuesUpdate }) => {    
  (...保留原有的计算逻辑...)
  
  const formattedTime = [pad(parseInt(seconds / 60)), pad(seconds % 60)].join(':')

  // 当依赖项变化时，触发回调传递最新值
  useEffect(() => {
    onValuesUpdate(formattedTime, secondValue)
  }, [seconds, resetTimer, runTimer]) // 根据实际计算依赖调整数组内容

  // 组件必须返回可渲染内容，不需要渲染时返回null
  return null
}

父组件中使用

import { useState } from 'react'

function ParentComponent() {
  const [formattedTime, setFormattedTime] = useState('00:00')
  const [secondValue, setSecondValue] = useState(0)

  // 定义回调函数接收子组件传递的值
  const handleValuesUpdate = (time, value) => {
    setFormattedTime(time)
    setSecondValue(value)
  }

  return (
    <>
      <TimerCalc 
        resetTimer={reset} 
        runTimer={startStopTimer} 
        onValuesUpdate={handleValuesUpdate} 
      />
      {/* 使用更新后的状态 */}
      <div>时间：{formattedTime}</div>
      <div>第二个值：{secondValue}</div>
    </>
  )
}

内容的提问来源于stack exchange，提问作者Carlos del Río Francés