我想将图像作为道具传递到另一个页面

Question

主要问题是这个图像是从文件资源管理器中选择的，我使用的是 react-router。 Add.js 这是您选择图像的地方

import { Link } from "react-router-dom";
import About from "./About";
import './styles/modal.css'
import firebase from "firebase";
require("firebase/firestore")
require("firebase/storage")



export default function Add(props) {
    const [image, setImage] = useState(null);
    const [modal, setModal] = useState(false);

    const pickImage = (event) => {
        //console.log();
        setImage(URL.createObjectURL(event.target.files[0]));
        //console.log(image);
    }
    const toggle = () => {
        setModal(!modal);
    }

    return (
        <div>
            <h1>Add</h1>
            <button onClick={toggle}>Add image</button>
            {modal ? (
                <div className="modal-bg">
                    <div className="modal">
                        <img src={image} style={{ width: '60%', height: '60%' }} className="ex-img" />
                        <br /><br />
                        <label htmlFor="fie" className="gcoo btn-default">+ File
                            <input id="fie" type="file" onChange={pickImage} className="file-pick" />
                        </label>
                        <br />
                        <br />
                        <div className="bottom-buttons">
                            <Link to="/about">
                                <button className="save">Save</button>
                            </Link>
                            <button onClick={() => setModal(false)} className="closse">Close</button>
                        </div>
                    </div>
                </div>
            ) : null}
        </div>
    )
}

我正在使用 firebase 但不在此文件中，因此您可以忽略它。 MainRoutes.js 这是所有路线和页面所在的位置。

import { Route } from "react-router";
import { Switch } from 'react-router-dom';

import ImageDisplay from "./components/ImageDisplay";
import Add from './components/Add';

export default function MainRoute(props) {
    return (
        <Switch>
            <Route exact path="/about" component={() => <ImageDisplay />} />
            <Route exact path="/add" component={() => <Add />} /> 
        </Switch>
    );
}

最后这个文件ImageDisplay.js 是应该显示图像的位置 我没有太多关于这个文件的内容，因为我不知道如何放入任何图像。 我尝试过道具，但每当我导入 Imagedisplay 时，它总是会在上面显示内容，我不想要图像显示中的任何内容。我只想在那边发一张图片。

import React from 'react'
import { Link } from "react-router-dom"

function ImageDisplay(props) {
    return (
        <div>
            <h1>image</h1>
            <div>
                <img />
                <p></p>
            </div>
        </div>
    )
}
export default ImageDisplay;

Answer 1

确保在两条路线之间移动时没有重新加载页面，因为这将删除所有状态。

要在两个组件之间共享状态，您需要将状态存储在父组件中，并将其传递给子组件。

添加：

export default function Add(props) {
    const pickImage = (event) => {
        props.setImage(URL.createObjectURL(event.target.files[0]));
    }

    // The rest of your function
}

在你的父母身上：

export default function MainRoute(props) {
    const [image, setImage] = useState(null)
    return (
        <Switch>
            <Route exact path="/about" component={() => <ImageDisplay image={image} />} />
            <Route exact path="/add" component={() => <Add setImage={setImage} />} /> 
        </Switch>
    );
}

您现在可以在 imageDisplay 中访问 image 属性。

function ImageDisplay(props) {
    return (
        <div>
            <h1>image</h1>
            <div>
                <img src={props.image} />
                <p></p>
            </div>
        </div>
    )
}