Question

错误：将图像传递给子组件时找不到模块“。”

2018-08-13

3679

reactjs

我在这里总是出错：

我试图将图片网址从父组件传递给子组件。但我总是遇到这样的错误。还有其他方法可以将图片网址数组传递给子组件吗？

父组件：

const { classes } = props;
    return( 
        <Grid
          container
          spacing={24}
          direction="row"
          justify="space-around"
          alignItems="flex-start"
        > 
            <Grid item xs={12} sm={12} md={10} lg={8} xl={6}> 
               <Slider imgPath={images} /> 
            </Grid>
        </Grid> 
    );

子组件：

import React, { Component } from 'react';
import Slider from 'react-animated-slider';
import horizontalCss from 'react-animated-slider/build/horizontal.css'; 

function slider(props) {
    const { classes } = props;
    var html=[];
    var imgPath=props.imgPath;

    for (var i = 0; i <imgPath.length; i++) { 
        var path = "'" + imgPath[i] + "'"; 
        var path1 = "<img src={require("+path+")} />"; 
        html.push(<img src={require(path)}/>);
    }

    return(
        <Slider autoplay={5000} classNames={horizontalCss}> 
            {html} 
        </Slider> 
    );
} 

export default slider;

Answer 1

您不能在 require 中使用动态名称，它需要静态可解路径。因此，这里有一个您可以这样做的示例。只需根据您的情况调整代码即可。

const App = () => {
  const images = [
    { id: 1, path: require( "./images/img1.jpg" ) },
    { id: 2, path: require( "./images/img2.jpg" ) },
    { id: 3, path: require( "./images/img3.jpg" ) },
  ];

  return (
    <div>
      {
        images.map( image => (
          <Img key={image.id} image={image} />
        ) )
      }
    </div>
  );
};

const Img = ( { image } ) => (
  <div>
    <p>{image.id}</p>
    <img width="100" src={image.path} />
  </div>
);

作为此方法的替代方法，我最近学到了一种更简单的方法：

const App = () => {
  const images = [
    { id: 1, path: "./images/img1.jpg" },
    { id: 2, path: "./images/img2.jpg" },
    { id: 3, path: "./images/img3.jpg" },
  ];

  return (
    <div>
      {
        images.map( image => (
          <Img key={image.id} image={image} />
        ) )
      }
    </div>
  );
};

const Img = ( { image } ) => (
  <div>
    <p>{image.id}</p>
    <img width="100" src={require( "" + image.path )} />
  </div>
);

require( "" + image.path ) 在这里很管用。使用此方法，我们不必编写那么多 require ，而是可以在子组件中使用一个。