我想讀取全局變量image01中url然后復(fù)制給react組件中的image,請問如何才能實(shí)現(xiàn)


var ImagesConfig = (function(){

    return {
        // 是否開啟圖片輪播功能
        imagePlay: true,
        // 輪播起始位置
        currentIndex : 0,
        // 圖片輪播間隔
        time : 3000,
        // 是否開啟讀取自定義圖片
        custom: true,
        // 輪播圖片路徑
        image01:{
            url:'../../../../public/imagesConfig/custom/slide1.jpg'
        },
        image02:{
            url:'../../../../public/imagesConfig/custom/slide2.jpg'
        },
        image03:{
            url:'../../../../public/imagesConfig/custom/slide3.jpg'
        },
        image04:{
            url:'../../../../public/imagesConfig/custom/slide4.jpg'
        },
        image05:{
            url:'../../../../public/imagesConfig/custom/slide5.jpg'
        },
        image06:{
            url:'../../../../public/imagesConfig/custom/slide6.jpg'
        }
    }
})();

import React from 'react'

class MessageContainer extends React.Component {

    constructor() {
        super();
        //localStorage.username='再見';

    }

    render() {
        var divStyle = {
            position: 'absolute',
            top: 0,
            left: 0,
            width:1920,
            height: 1080
        }
        console.log(ImagesConfig.image01.url)
        //var image01 = ImagesConfig.image01.url;

        var icon01 = ImagesConfig.image01.url


        return (

            <div className={'slider'} style={divStyle}>


                <ul className={"slider-main"}>
                    <li className={"slider-panel"}>
                        <img src={icon01} ></img>
                    </li>

                </ul>

            </div>
        )
    }
}



export default MessageContainer;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="config/set.js"></script>

</head>
<body>


<div id="app"></div>



<script src="vendor.bundle.js"></script>
<script src="main.bundle.js"></script>

</body>
</html>

地址：https://github.com/wohuifude1...

啟動頁面：http://127.0.0.1:6600/#/age

回答

編輯回答

小眼睛

 var icon01 = ImagesConfig.custom ?
            require('../../../../public/imagesConfig/custom/slide1.jpg') :
            require('../../../../public/imagesConfig/default/slide1.jpg') ;

var icon01 = window.ImagesConfig.image01.url;
//**前提是你的ImagesConfig是一個(gè)全局變量，也就是說，你需要在index.html中把你這個(gè)configjs引入（即<script src={你的configjs}></script>）,否則你需要將ImagesConfig輸出出去，然后在react中引入（即export&&import這樣）**
        return (

            <div className={'slider'} style={divStyle}>


                <ul className={"slider-main"}>
                    <li className={"slider-panel"}>
                        <img src={icon01} ></img>
                    </li>

                </ul>

            </div>
        )
    }

2018年1月28日 07:30