Javascript 使用React上下文（图像编辑器应用程序）将状态从子级传递到应用程序组件

我正在构建这个简单的图像编辑器，您可以从驱动器上传图像，然后使用各种css属性对其进行过滤。文件上传部分位于名为FileUpload的组件中，是应用程序的子组件。我的问题是，我需要一个文件上传的状态才能在App.js中访问以呈现图片。这是应用程序组件的返回：

return (
    <div className="container">
      <div className="file-upload">
        <FileUpload />
      </div>

      <div style={getImageStyle()} className="main-image" />
      <div className="sidebar">
        {options.map((option, index) => {
          return (
            <SidebarItem
              key={index}
              name={option.name}
              active={index === selectedOptionIndex}
              handleClick={() => setSelectedOptionIndex(index)}
            />
          );
        })}
      </div>
      <Slider
        min={selectedOption.range.min}
        max={selectedOption.range.max}
        value={selectedOption.value}
        handleChange={handleSliderChange}
      />
    </div>
  );

 const [file, setFile] = useState("");
  const [filename, setFilename] = useState("Choose File");
  const [uploadedFile, setUploadedFile] = useState({});
  const [message, setMessage] = useState("");
  const [uploadPercentage, setUploadPercentage] = useState(0);

  const onChange = (e) => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", file);

    try {
      const res = await axios.post("/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        onUploadProgress: (progressEvent) => {
          setUploadPercentage(
            parseInt(
              Math.round((progressEvent.loaded * 100) / progressEvent.total)
            )
          );

          // Clear percentage
          setTimeout(() => setUploadPercentage(0), 10000);
        },
      });

      const { fileName, filePath } = res.data;

      setUploadedFile({ fileName, filePath });

      setMessage("File Uploaded");
    } catch (err) {
      if (err.response.status === 500) {
        setMessage("There was a problem with the server");
      } else {
        setMessage(err.response.data.msg);
      }
    }
  };

  return (
    <Fragment>
      <form onSubmit={onSubmit}>
        <div>
          <input
            type="file"
            className="custom-file-input"
            id="customFile"
            onChange={onChange}
          />
          <label className="custom-file-label" htmlFor="customFile">
            {filename}
          </label>
        </div>

        <Progress percentage={uploadPercentage} />

        <input
          type="submit"
          value="Upload"
          className="btn btn-primary btn-block mt-4"
        />
      </form>
      {uploadedFile ? (
        <div className="row mt-5">
          <div className="col-md-6 m-auto">
            <h3 className="text-center">{uploadedFile.fileName}</h3>
            <img style={{ width: "100%" }} src={uploadedFile.filePath} alt="" />
          </div>
        </div>
      ) : null}
    </Fragment>
  );
};

返回(
{options.map（（选项，索引）=>{
返回(
setSelectedOptionIndex（索引）}
/>
);
})}
);

现在我需要FileUpload组件中的状态：

return (
    <div className="container">
      <div className="file-upload">
        <FileUpload />
      </div>

      <div style={getImageStyle()} className="main-image" />
      <div className="sidebar">
        {options.map((option, index) => {
          return (
            <SidebarItem
              key={index}
              name={option.name}
              active={index === selectedOptionIndex}
              handleClick={() => setSelectedOptionIndex(index)}
            />
          );
        })}
      </div>
      <Slider
        min={selectedOption.range.min}
        max={selectedOption.range.max}
        value={selectedOption.value}
        handleChange={handleSliderChange}
      />
    </div>
  );

 const [file, setFile] = useState("");
  const [filename, setFilename] = useState("Choose File");
  const [uploadedFile, setUploadedFile] = useState({});
  const [message, setMessage] = useState("");
  const [uploadPercentage, setUploadPercentage] = useState(0);

  const onChange = (e) => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", file);

    try {
      const res = await axios.post("/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        onUploadProgress: (progressEvent) => {
          setUploadPercentage(
            parseInt(
              Math.round((progressEvent.loaded * 100) / progressEvent.total)
            )
          );

          // Clear percentage
          setTimeout(() => setUploadPercentage(0), 10000);
        },
      });

      const { fileName, filePath } = res.data;

      setUploadedFile({ fileName, filePath });

      setMessage("File Uploaded");
    } catch (err) {
      if (err.response.status === 500) {
        setMessage("There was a problem with the server");
      } else {
        setMessage(err.response.data.msg);
      }
    }
  };

  return (
    <Fragment>
      <form onSubmit={onSubmit}>
        <div>
          <input
            type="file"
            className="custom-file-input"
            id="customFile"
            onChange={onChange}
          />
          <label className="custom-file-label" htmlFor="customFile">
            {filename}
          </label>
        </div>

        <Progress percentage={uploadPercentage} />

        <input
          type="submit"
          value="Upload"
          className="btn btn-primary btn-block mt-4"
        />
      </form>
      {uploadedFile ? (
        <div className="row mt-5">
          <div className="col-md-6 m-auto">
            <h3 className="text-center">{uploadedFile.fileName}</h3>
            <img style={{ width: "100%" }} src={uploadedFile.filePath} alt="" />
          </div>
        </div>
      ) : null}
    </Fragment>
  );
};

const[file，setFile]=useState（“”）；
const[filename，setFilename]=useState（“选择文件”）；
const[uploadedFile，setUploadedFile]=useState（{}）；
const[message，setMessage]=useState（“”）；
const[uploadPercentage，setUploadPercentage]=useState（0）；
const onChange=（e）=>{
setFile（e.target.files[0]）；
setFilename（e.target.files[0].name）；
};
const onSubmit=async（e）=>{
e、 预防默认值（）；
const formData=new formData（）；
formData.append（“文件”，file）；
试一试{
const res=wait axios.post（“/upload”），formData{
标题：{
“内容类型”：“多部分/表单数据”，
},
onUploadProgress：（progressEvent）=>{
设置装载百分比(
帕森特(
数学圆（（progressEvent.loaded*100）/progressEvent.total）
)
);
//净百分比
setTimeout（（）=>setUploadPercentage（0），10000）；
},
});
const{fileName，filePath}=res.data；
setUploadedFile（{fileName，filePath}）；
setMessage（“上传的文件”）；
}捕捉（错误）{
如果（err.response.status==500）{
setMessage（“服务器出现问题”）；
}否则{
setMessage（err.response.data.msg）；
}
}
};
返回(
{filename}
{上传的文件(
{uploadedFile.fileName}
)：null}
);
};

现在我需要uploadedFile状态在应用程序中可访问，因为我需要该文件来设置div的背景图像

是否可以使用useContext，或者我应该移动父应用程序中的所有状态和逻辑？

---

非常感谢您的帮助

在

文件上传

中声明一个道具怎么样？上传文件时调用该道具并将文件传回

应用程序

---

所以类似于

？

的内容是指在我将在应用程序组件中创建的函数中传递参数吗？