Как отобразить элемент <img> внутри функции в React?

Question

Я хотел бы сделать возврат из оператора else if.

Есть ли способ визуализировать изображения в тегах?

Я хотел бы показать другое изображение в зависимости от результата, возвращаемого API


export default function GetDieResult() {
  const [dieRollResult, setDieRollResult] = useState(1);
  
  const whichDieImageToDisply = (rollResult ) => {
    if (rollResult === 1) {
      return <img className="die" src={d1} alt="A die displaying 1" />;
    } else if (rollResult === 2) {
      return <img className="die" src={d2} alt="A die displaying 2" />;
    } else if (rollResult === 3) {
      return <img className="die" src={d3} alt="A die displaying 3" />;
    } else if (rollResult === 4) {
      return <img className="die" src={d4} alt="A die displaying 4" />;
    } else if (rollResult === 5) {
      return <img className="die" src={d5} alt="A die displaying 5" />;
    } else if (rollResult === 6) {
      return <img className="die" src={d6} alt="A die displaying 6" />;
    }
  };

  const checkResponse = (response) => {
    if (!response.ok) throw new Error(`Network error: ${response.status}`);
    return response.json();
  };

  const rollDie = () => {
    fetch("https://rolz.org/api/?d6.json")
      .then(checkResponse)
      .then((data) => {
        setDieRollResult(data.result);
        whichDieImageToDisply();
        console.log(whichDieImageToDisply(data.result))
      });
  };

  useEffect(() => {
    rollDie();
  }, [dieRollResult]);

  console.log(dieRollResult);

  return (
    <main>
    
      <img src={d1} alt="A die displaying 1" className="die" />
    </main>
  );
}

javascript reactjs

0

Peppa Box 17 Янв 2021 в 00:27

Answer 1

На вашем месте я бы немного реорганизовал код и немного его упростил.

Сначала я бы переместил выборку на обработчик useEffect и сделал бы массив зависимостей пустым. Таким образом, он сделает запрос к API только один раз после рендеринга компонента. Затем я бы создал состояние status, чтобы мне было легче отслеживать, в каком состоянии сейчас находится компонент. Затем это позволяет мне визуализировать правильное изображение на основе dieRollResult, полученного из API. Кроме того, вы можете просто вызвать функцию dieImage() в JSX, которая затем отобразит правильное изображение на основе dieRollResult, и поскольку мы используем здесь status, {{X7 }} функция будет вызываться только после получения данных из API. А пока он покажет вам загрузочный текст.

function GetDieResult() {
  const [dieRollResult, setDieRollResult] = useState(1);
  const [status, setStatus] = useState("idle");

  const dieImage = () => {
    if (dieRollResult === 1) {
      return <img className="die" src={d1} alt="A die displaying 1" />;
    } else if (dieRollResult === 2) {
      return <img className="die" src={d2} alt="A die displaying 2" />;
    } else if (dieRollResult === 3) {
      return <img className="die" src={d3} alt="A die displaying 3" />;
    } else if (dieRollResult === 4) {
      return <img className="die" src={d4} alt="A die displaying 4" />;
    } else if (dieRollResult === 5) {
      return <img className="die" src={d5} alt="A die displaying 5" />;
    } else if (dieRollResult === 6) {
      return <img className="die" src={d6} alt="A die displaying 6" />;
    }
  };

  useEffect(() => {
    setStatus("fetching");

    fetch("https://rolz.org/api/?d6.json").then(async (res) => {
      if (!res.ok) {
        setStatus("failed");

        throw new Error(`Network error: ${res.status}`);
      }

      const { result } = await res.json();

      setDieRollResult(result);
      setStatus("processed");
    });
  }, []);

  return (
    <main>
      {status === "processed" ? (
        dieImage()
      ) : (
        <p style={{ color: "blue" }}>loading...</p>
      )}
    </main>
  );
}

0

Mantas Astra 16 Янв 2021 в 21:47

Answer 2

import React from "react";

export default function Img (props) {

  const [myPic, setMyPic] = React.useState("");

  React.useEffect(() => {
    fetch(props.url)
      .then(res=>res.blob())
      .then(pic =>{
         const auxUrl = URL.createObjectURL(pic);
         setMyPic(auxUrl);

         return function () {
            URL.revokeObjectURL(auxUrl);
         }
      })
  }, [props.url]);

  return (
    <img src={myPic} />
  )
}

0

Ernesto 16 Янв 2021 в 21:41

Answer 3

Вы можете вызвать функцию из блока возврата. whichDieImageToDisply(). Но если эта функция должна принимать состояние или должна быть определена внутри компонента, и каждый рендер будет создавать функцию снова. Вам может потребоваться обернуть его с помощью useCallback и т. Д .; но я предложу альтернативный способ, я думаю, лучше и чище, через перечисления.

Внутри вашего блока возврата вы можете использовать это; вам не нужна функция whichDieImageToDisply.

  {
    {
      1: <img className="die" src={d1} alt="A die displaying 1" />;,
      2: <img className="die" src={d2} alt="A die displaying 2" />,
      3: <img className="die" src={d3} alt="A die displaying 3" />,
      4: <img className="die" src={d4} alt="A die displaying 4" />;,
      5: <img className="die" src={d5} alt="A die displaying 5" />,
      6: <img className="die" src={d6} alt="A die displaying 6" />,
    }[dieRollResult]
  }

Подробнее: https://www.robinwieruch.de/conditional-rendering-react

0

Emre A 16 Янв 2021 в 22:26

Как отобразить элемент <img> внутри функции в React?

3 ответа

Похожие вопросы

Новые вопросы

javascript