reactjs - 如何在 React js 中使用 Refs 更改图像 src

Question

我正在尝试使用 refs 而不是 document.querySelector 更改图像 src，但我不知道如何去做，也找不到它的教程/文档。

 <img id='indigo' src={igo} height="134" width="130" />

                          let img = document.querySelector('indigo');
                          if(reasultl === 'true'){
                          
                          img.src = {igo}
                        }
                         else{
                          img.src = {placeholder}
                         }

谢谢

Answer 1

首先，使用这种方式为图片标签创建ref

• 类内组件:

  const imagRef=React.createRef();

• 在功能组件中:

  const imageRef=useRef();

然后，像这样将它分配给图像标签

<img src={igo} ref={imageRef} />

之后，使用 imageRef 像这样更改 src:

imageRef.current.src = result === 'true' ? {igo} : {placeholder}

然而，这可以在没有 refs 的情况下完成，如 armans 的回答所示。

功能组件中的状态:

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
    const [loading, setLoading] = useState(true);
    const [image, setImage] = useState(
        "https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif"
    );

    useEffect(() => {
        if (loading) {
        setTimeout(() => {
            if (loading) {
                setLoading(false);
                setImage(
                    "https://post.healthline.com/wp-content/uploads/2020/08/3180-Pug_green_grass-732x549-thumbnail-732x549.jpg"
                );
            }
        }, 1000);
        }
    }, [loading, setLoading, setImage]);

    return (
        <div className="App">
            <img src={image} alt="okay" />
        </div>
);
}

Try here in sandbox

最后，使用 refs 做同样的事情

import { useEffect, useState, useRef } from "react";
import "./styles.css";

export default function App() {
    const [loading, setLoading] = useState(true);
    const imageRef = useRef();
    
    useEffect(() => {
        if (loading) {
            setTimeout(() => {
                if (loading) {
                    setLoading(false);
                }
            }, 1000);
        }
    }, [loading, setLoading]);

    useEffect(() => {
    imageRef.current.src = loading ?
        "https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" :
        "https://post.healthline.com/wp-content/uploads/2020/08/3180-Pug_green_grass-732x549-thumbnail-732x549.jpg";
    }, [loading, imageRef]);

    return (
    <div className="App">
        <img ref={imageRef} alt="okay" />
    </div>
    );
}

Try it in sandbox

希望这会有所帮助!