Javascript 父级组件中的JSX作为字符串

我有一个组件，它从

5

开始倒计时，并在JSX返回中返回当前计数

注意：通常我会使用一个函数并使用返回值，但是这很麻烦，因为组件使用React钩子并在调用函数时导致错误

我的倒计时部分是

import React, { useEffect, useState } from 'react';

const countdownSeconds = 5;
const Countdown = () => {
  const [timing, setTiming] = useState(true);
  const [second, setSecond] = useState(countdownSeconds);
  useEffect(() => {
    let interval: number;
    if (timing) {
      interval = setInterval(() => {
        setSecond(preSecond => {
          if (preSecond <= 1) {
            setTiming(false);
            clearInterval(interval);
            return countdownSeconds;
          } else {
            return preSecond - 1;
          }
        });
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [timing]);

  return <>${timing ? second : 0}</>;
};

export default Countdown;

这显然会返回

[object object]

如何将

${timing？second:0}

作为字符串传递给

---

如果可能的话，我不想使用上下文。

您必须像这样更新代码

<Typography
  text={
    <>
      <span>countdown is</span> <Countdown /> <span>seconds</span>
    </>
  }
/>

---

希望这对你有用

不客气！

<Typography
  text={
    <>
      <span>countdown is</span> <Countdown /> <span>seconds</span>
    </>
  }
/>