鍍金池/ 問答/HTML/ 我想通過setState({isRed : !this.state.isRed}

我想通過setState({isRed : !this.state.isRed})來讓高階組件隱藏,但是一直無效

import React from 'react'

import { Foundation } from '../../components/ECharts-HOC'

import eContainer from '../../components/ECharts-Container';

class AbbottTest extends React.Component {

    constructor() {
        super();
        //localStorage.username='再見';
        this.state = {
            isRed : true,
            // 基礎(chǔ)層
            style:{
                className: 'dataECharts',
                width: 500,
                height:500
            },

            // 彈出層
            extendStyle:{
                className: 'extend-dataECharts',
                width: 900,
                height:900,
                position: 'absolute',
                left:800,
                top:150,
                display: 'block'
            },

            // ECharts 樣式
            optionECharts: {
                title: {
                    text: '新的世界正式開始'
                },
                tooltip: {},
                legend: {
                    data: ['無限']
                },
                xAxis: {
                    data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子", "無敵"]
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20, 90]
                }]
            }
        }

        this.handleClick=this.handleClick.bind(this)
    }

    handleClick() {
        console.log('isRed')
        this.setState({isRed : !this.state.isRed});
        console.log(this.state.isRed)

    }

    componentWillReceiveProps(nextProps) {
        console.log('eContainer')
        console.log(this.state.isRed)
    }

    _init() {
        // 參數(shù)設(shè)置
        var doc = document.getElementsByClassName(this.state.style.className)[0];
        return import(/* webpackChunkName: "echarts" */ 'echarts').then(echarts => {
            // 基于準備好的dom,初始化echarts實例
            var myChart = echarts.init(doc);
            // 指定圖表的配置項和數(shù)據(jù)
            var option = this.state.optionECharts;
            // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
            myChart.setOption(option);
        }).catch(error => 'An error occurred while loading the component');
    }

    componentDidMount() {
        this._init();
    }

    render() {
        var divStyle ={

        }

        return (
            <div>
                <div style={divStyle} className='data-line'>

                </div>

                <div onClick={this.handleClick} className={this.state.style.className} style={{width: this.state.style.width, height: this.state.style.height}}>

                </div>

            </div>
        )
    }
}

AbbottTest = Foundation(AbbottTest);

export default AbbottTest;
export const Foundation = (WrappedComponent) => {

    class NewComponent extends WrappedComponent {
        constructor() {
            super();
        }

        _init() {
            // 參數(shù)設(shè)置
            var doc = document.getElementsByClassName(this.state.extendStyle.className)[0];
            /*
            var optionECharts = {
                title: {
                    text: 'ECharts 入門測試開始'
                },
                tooltip: {},
                legend: {
                    data: ['銷量']
                },
                xAxis: {
                    data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子", "無敵"]
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20, 90]
                }]
            };
            */

            return import(/* webpackChunkName: "echarts" */ 'echarts').then(echarts => {
                // 基于準備好的dom,初始化echarts實例
                var myChart = echarts.init(doc);
                // 指定圖表的配置項和數(shù)據(jù)
                var option = this.state.optionECharts;
                // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
                myChart.setOption(option);
            }).catch(error => 'An error occurred while loading the component');
        }
        /*
        showJson(){
            var test;
            if(window.XMLHttpRequest){
                test = new XMLHttpRequest();
            }else if(window.ActiveXObject){
                test = new window.ActiveXObject();
            }else{
                console.log("請升級至最新版本的瀏覽器");
            }
            if(test !=null){
                test.open("GET","components/bar01/json.json",true);
                test.send(null);
                test.onreadystatechange=function(){
                    if(test.readyState==4&&test.status==200){
                        var obj = JSON.parse(test.responseText);
                        for (var name in obj){
                            console.log(obj[name].key);
                        }
                    }
                };

            }
        }
        */

        componentWillReceiveProps(nextProps) {
            console.log('WillReceive')
            console.log(this.state.isRed)
        }

        componentDidMount() {
            this._init()
        }

        componentWillMount() {
            //this.showJson();
            console.log(this.state.optionECharts)

        }

        render() {

            const newProps = {
                name: "cqm",
                value: "testData",
            }
            /*
            var divECharts = {
                width: this.state.style.width,
                height: this.state.style.height
            }
            */

            var divECharts = { }

            for(var stateStyle in this.state.extendStyle)
            {
                //console.log(stateStyle);
                //console.log(this.state.style[stateStyle]);
                divECharts[stateStyle] = this.state.extendStyle[stateStyle];
            }

            var redStyle = {
                display: 'none'
            };

            return (
                <div>
                    <div className={this.state.extendStyle.className} style={this.state.isRed ? divECharts:redStyle }></div>
                    <WrappedComponent {...this.props} {...newProps}/>
                </div>
            )
        }
    }

    return NewComponent

}

圖片描述

項目地址:https://github.com/wohuifude1...

打開頁面:127.0.0.1:6600/#/test01

回答
編輯回答
維她命
                    <div className={this.state.extendStyle.className} style={this.state.isRed ? divECharts:redStyle }></div>

沒有把高階組件包裹起來啊

2017年10月14日 06:28