在 Material UI 中使用引用

Question

我正在尝试使用 Material UI 中的 Refs 来更改图像源，但它给我一个 'Undefined' 错误。看起来 link 正在创建，但没有作为图像 src 应用，我觉得问题出在第 10 行。

CodeSandBox - https://codesandbox.io/s/complexgrid-material-demo-forked-h6zfqh?file=/demo.tsx

    const [loading] = useState(true);
      const imageRef = React.useRef();
      let txt = "IGO";
    
      useEffect(() => {
        imageRef.current.src = `https://flightaware.com/images/airline_logos/90p/${txt}.png`;
        console.log(imageRef.current.src);
      }, 

[loading, imageRef]);

<ButtonBase sx={{ width: 128, height: 128 }}>
                  <Img alt="complex" ref={imageRef} />
                </ButtonBase>

Answer 1

主要问题是ref的使用方式。目前，您对同一图像组件使用相同的参考。为了更好地管理图片标签，您应该为每个图片标签使用不同的ref。

请参考此代码。

import * as React from "react";
import { styled } from "@mui/material/styles";
import Grid from "@mui/material/Grid";
import D34, { useEffect, useState } from "react";
import Paper from "@mui/material/Paper";
import RootRef from "@material-ui/core/RootRef";
import Typography from "@mui/material/Typography";
import ButtonBase from "@mui/material/ButtonBase";
import Data from "./abc.json";
import { red } from "@mui/material/colors";
const Img = styled("img")({
  margin: "auto",
  display: "block",
  maxWidth: "100%",
  maxHeight: "100%"
});

export default function ComplexGrid() {
  const [loading] = useState(true);
  const imageRef = React.useRef();
  let txt = "IGO";

  useEffect(() => {
    console.log(imageRef.current.src);
    if (imageRef.current.src === "")
      imageRef.current.src = `https://flightaware.com/images/airline_logos/90p/${txt}.png`;
  }, [loading, imageRef]);

  return (
    <div className="hello">
      <Img alt="complex" ref={imageRef} />
      {Data.response.map((post) => {
        return (
          <Paper
            sx={{
              pt: 1,
              border: 1,
              boxShadow: 0,
              mt: 1,
              maxWidth: 900,
              flexGrow: 1,
              backgroundColor: (theme) =>
                theme.palette.mode === "dark" ? "#1A2027" : "#fff"
            }}
          >
            <Grid container spacing={2}>
              <Grid item>
                <ButtonBase sx={{ width: 128, height: 128 }}>
                  {/* <Img alt="complex" ref={imageRef} /> */}
                </ButtonBase>
              </Grid>
              <Grid item xs={12} sm container>
                <Grid item xs container direction="column" spacing={2}>
                  <Grid item xs>
                    <Typography
                      gutterBottom
                      variant="subtitle1"
                      component="div"
                    >
                      Standard license
                    </Typography>
                    <Typography variant="body2" gutterBottom>
                      Full resolution 1920x1080 • JPEG
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      ID: 1030114
                    </Typography>
                  </Grid>
                  <Grid item></Grid>
                </Grid>
                <Grid item>
                  <Typography
                    variant="subtitle1"
                    component="div"
                    sx={{ px: 2, p: 2 }}
                  >
                    .00
                  </Typography>
                </Grid>
              </Grid>
            </Grid>
          </Paper>
        );
      })}
    </div>
  );
}

希望对您有所帮助。谢谢

Answer 2

你可以使用useState来改变src

 const [img, setImg] = useState()
 let txt = "IGO";

 useEffect(() => {
    setImg(`https://flightaware.com/images/airline_logos/90p/${txt}.png`)
 }, [loading]);

 {img && <Img alt="complex" src={img} />}

Answer 3

您可以使用参考列表来更改图片，就像您之前所做的那样。我给了你一个功能代码，它像我想的那样工作:)

import * as React from "react";
import { styled } from "@mui/material/styles";
import Grid from "@mui/material/Grid";
import D34, { useEffect, useState } from "react";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import ButtonBase from "@mui/material/ButtonBase";
import Data from "./abc.json";
const Img = styled("img")({
  margin: "auto",
  display: "block",
  maxWidth: "100%",
  maxHeight: "100%"
});

export default function ComplexGrid() {
  const [loading] = useState(true);
  const imagesRef = [];
  let txt = "IGO";

  useEffect(() => {
    imagesRef.forEach((refImg) => {
      refImg.src = `https://flightaware.com/images/airline_logos/90p/${txt}.png`;
    });
    /*imageRef.current.src = `https://flightaware.com/images/airline_logos/90p/${txt}.png`;
    console.log(imageRef.current.src);*/
  }, [loading]);

  return (
    <div className="hello">
      {Data.response.map((post, posPost) => {
        return (
          <Paper
            sx={{
              pt: 1,
              border: 1,
              boxShadow: 0,
              mt: 1,
              maxWidth: 900,
              flexGrow: 1,
              backgroundColor: (theme) =>
                theme.palette.mode === "dark" ? "#1A2027" : "#fff"
            }}
          >
            <Grid container spacing={2}>
              <Grid item>
                <ButtonBase sx={{ width: 128, height: 128 }}>
                  <Img alt="complex" ref={(imageRef) => {
                    if (!imagesRef[posPost]) {
                      imagesRef.push(imageRef);
                    }
                  }} />
                </ButtonBase>
              </Grid>
              <Grid item xs={12} sm container>
                <Grid item xs container direction="column" spacing={2}>
                  <Grid item xs>
                    <Typography
                      gutterBottom
                      variant="subtitle1"
                      component="div"
                    >
                      Standard license
                    </Typography>
                    <Typography variant="body2" gutterBottom>
                      Full resolution 1920x1080 • JPEG
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      ID: 1030114
                    </Typography>
                  </Grid>
                  <Grid item></Grid>
                </Grid>
                <Grid item>
                  <Typography
                    variant="subtitle1"
                    component="div"
                    sx={{ px: 2, p: 2 }}
                  >
                    .00
                  </Typography>
                </Grid>
              </Grid>
            </Grid>
          </Paper>
        );
      })}
    </div>
  );
}

在 Material UI 中使用引用

Use Refs In Material UI

reactjs

material-ui