React中如何在父组件所在同页面渲染依赖其数据的子组件

你可以通过React状态驱动条件渲染的方式实现该需求，具体操作如下： #

步骤1：新增控制报告页显示的状态 #

在当前Upload组件内新增布尔类型的状态，用来控制ReportPage是否渲染：

import { useState } from 'react';

// 组件内部代码
const [showReport, setShowReport] = useState(false);

步骤2：修改提交表单的逻辑 #

修改handleSubmit函数，务必先阻止表单默认提交行为，校验文件有效后切换显示状态即可，不需要返回组件：

const handleSubmit = (e) => {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault();
  const submitFiles = filesRef.current;
  // 做文件非空校验，避免ReportPage异常
  if (!submitFiles || submitFiles.length === 0) {
    setAlert('请先上传有效文件');
    return;
  }
  // 触发报告页渲染
  setShowReport(true);
}

步骤3：在渲染结构中添加条件渲染逻辑 #

在原有上传区域的结构下方，新增ReportPage的条件渲染代码，把文件数据通过props传给ReportPage：

return (
  {/* 用React空标签包裹所有节点 */}
  <>
    <div className="section" id="uploadSection">
      <div style={containerStyle}>
        <form style={formStyle} onSubmit={handleSubmit}>
          <UploadBox setFiles={setFiles} fileLimit={fileLimit} setAlert={setAlert} />
          <input
            className="upload-btn"
            type="submit"
            value="Submit files"
            style={{ opacity: btnOpacity }}
          />
        </form>
      </div>
    </div>
    {/* 只有showReport为true时才渲染报告页 */}
    {showReport && <ReportPage files={filesRef.current} />}
  </>
)

说明 #

你之前直接在提交函数里返回ReportPage不生效，是因为事件处理函数的返回值不会被加入到React的渲染树中，React组件的渲染内容只能来自组件顶层的return语句，所有动态显示的内容都需要通过状态驱动。
如果需要支持用户重新上传，可以额外加一个重置按钮，点击后执行setShowReport(false)并清空已上传的文件即可。

内容的提问来源于stack exchange，提问作者A.P