如何在现有React应用中添加react-countdown倒计时组件

你给出的示例代码无法正常运行，ReactDOM.render 仅允许传入一个根React元素作为第一个渲染参数，第二个参数需要是页面上真实存在的DOM挂载节点，你同时传入两个组件的写法不符合语法要求。

正确实现步骤（将倒计时放在App内指定div） #

如果你需要把倒计时放在App组件内部的指定位置，按下面的步骤操作即可：

• 第一步：在App.js文件顶部引入react-countdown组件，你原有的hooks引入、业务逻辑代码都不需要修改
• 第二步：找到App返回的JSX结构中你要放置倒计时的指定div，直接把<Countdown />组件写在该div内部即可，组件的date等参数可以按需配置
• 第三步：项目入口文件不需要做任何修改，保持原有渲染<App />的逻辑即可

你可以参考下面的App.js示例代码：

// App.js 顶部保留你原有所有引入，新增Countdown的引入
import React, { useState, useEffect } from 'react';
import Countdown from 'react-countdown';

function App() {
  // 你原有所有hooks、业务逻辑代码保留不动
  const [demo, setDemo] = useState('');

  return (
    <div className="App">
      {/* 你原有所有布局代码保留不动 */}
      <div>原有布局内容</div>
      
      {/* 找到你要放倒计时的指定div，插入组件即可 */}
      <div className="target-countdown-box">
        <Countdown date={Date.now() + 10000} />
        {/* 如果需要自定义倒计时的展示格式，可以额外传renderer参数配置 */}
      </div>

      {/* 剩余原有布局代码保留不动 */}
    </div>
  )
}

export default App;

特殊场景：倒计时放在App组件外部 #

如果你确实需要把倒计时放在App组件外部、和App平级显示，可以把两个组件包裹在同一个根节点下传入ReactDOM.render，但这种写法下倒计时不会出现在App内部的指定div中，参考代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-countdown';
import App from './App';

ReactDOM.render(
  <> {/* 用空标签作为根节点包裹两个平级组件 */}
    <Countdown date={Date.now() + 10000} />
    <App />
  </>,
  document.getElementById('root')
);

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