从道具

Question

我正在尝试将图片网址传递给孩子们，然后按如下方式要求：

import React, {Component} from 'react';

let color = require('../../css/colors.js');

let defaultStyle = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexBasis: 'calc(50% - 40px)',
    flexDirection: 'column',
    margin: '20px',
    backgroundColor: color.blueCard
}

class Card extends Component {

    render() {
        const imgUrl = require(this.props.background);
        return (<div style={{
                ...defaultStyle
            }}>
            <img src={imgUrl} alt="img"/>
        </div>);
    }
}
export default Card;

this.props.background看起来像这样："../../img/album1.jpg"

当我启动React App时，我在const imgUrl = require(this.props.background);上收到以下错误消息：

Error: Cannot find module "."
webpackMissingModule

React App是使用create-react-app创建的。我的猜测是webpack无法解析资源文件。

Answer 1

Submit Page

试试这个，我认为它会起作用。

Answer 2

在这种情况下不需要require，您只需获取从父组件传递的props。

代表：

<Card background={your_value}/>

然后在Card组件

中

const imgUrl = this.props.background;