我正在尝试制作一个可重复使用的组件，select 图像并取回二进制数据。在另一个组件中使用该数据是我苦苦挣扎的地方

Question

    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

然后发送图像变量问题是我的组件如何 im return 数据 or 问题是我的组件如何 im return 数据 or 问题是我的组件如何 im return 数据或 //////////////////////////////////////////////// ////////////////////////////////////////// 从 'react' 导入 React，{ useState }；从 'axios';

导入 axios

    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>
            
        );
    }

Answer 1

管理父组件中的状态并将其作为 props 传递给 LogoUpload 函数

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

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

我正在尝试制作一个可重复使用的组件，select 图像并取回二进制数据。在另一个组件中使用该数据是我苦苦挣扎的地方

I am trying to make a reusible component , select image and get binairy data back. Using that data in another component is where I am strigling

import

var

export

reactjs