Reactjs 我试图制作一个可重用的组件，选择图像并获取二进制数据。在另一个组件中使用这些数据正是我努力的方向

然后也发送图像变量 是我的组件如何返回数据的问题，还是我的组件如何返回数据的问题，还是我的组件如何返回数据的问题 ////////////////////////////////////////////////////////////////////////////////////////////// 从“React”导入React，{useState}； 从“axios”导入axios

    Getting data in the console but want to import the var image to be used in another component
    Example would be to  do this in another component

导出默认函数logupload（）{
const[image，setImage]=useState（“”）；//Wnat导出此变量
const[selectedFile，setSelectedFile]=useState（“”）；
const fileUpload=React.createRef（）；
函数onFileChangeHandler（e）{
//当用户选择要作为图像上载的文件时运行的例程
e、 预防默认值（）；
const file=e.target.files[0]；
var承诺=新承诺（（解决、拒绝）=>{
const reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=（）=>resolve（reader.result）；
reader.onerror=e=>拒绝（e）；
});
承诺。然后（回复=>{
setImage（响应）；
设置所选文件（文件）；
控制台日志（响应）；
});
}
函数showFileUpload（e）{
e、 预防默认值（）；
fileUpload.current.click（）；
返回图像；
}
//导出此函数不知道如何导出：(
函数getImageData（）{
返回图像；
}
返回(
//单击并显示图像并获取数据
);
}

管理父组件中的状态，并将其作为道具传递给LogoUpload功能

    export default function LogoUpload() {
        const [image, setImage] = useState(''); //Wnat to export this variable
        const [selectedFile, setSelectedFile] = useState('');
        const fileUpload = React.createRef();
    
        function onFileChangeHandler(e) {
            // routine to run when the user selects a file to upload as an image
            e.preventDefault();
            const file = e.target.files[0];
            var promise = new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = e => reject(e);
            });
            promise.then(response => {
                setImage(response);
                setSelectedFile(file);
                    console.log(response);
            });
        }
    
         function showFileUpload(e) {
            e.preventDefault();
            fileUpload.current.click();
            return image;
        }
    
// export this function dont know how :(
        function getImageData() {
            return image;
        }
    
        return (
//Click and display image and get data
            <div className="AddImage">
                <input
                    type="file"
                    id="imageUpload"
                    style={{ display: 'none' }}
                    ref={fileUpload}
                    onChange={onFileChangeHandler}
                />
    
                <input
                    type="image"
                    style={{
                        width: '100px',
                        height: '100px',
                        borderRadius: '50%',
                        objectFit: 'cover',
                        objectPosition: 'center',
                    }}
                    src={image}
                    alt="Add Logo"
                    onClick={showFileUpload}
                />
            </div>
            
        );
    }

导出默认函数LogoUpload（image，setImage）{
...
}
类ParentComponent:React.FC=（）=>{
const[image，setImage]=useState（“”）；
返回(
...
...
);
}

您好，抱歉，我有点困惑。您可以参考一个示例或其他内容吗？我是否要将LogoUpload（图像，设置图像添加到我要使用图像的组件中？告诉我没有未处理的拒绝（TypeError）：设置图像不是一个函数解决了它，谢谢（不知道您可以这样做：0）

export default function LogoUpload(image, setImage) {
 ...
}

class ParentComponent: React.FC = () => {
  const [image, setImage] = useState('');
  
  return (
    ...
    <LogoUpload image={image} setImage={setImage} />
    ...
  );
}