在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ react 項(xiàng)目中,怎么才能把子組件的變量1、變量2傳遞給父組件的

react 項(xiàng)目中,怎么才能把子組件的變量1、變量2傳遞給父組件的

怎么才能把子組件的變量1、變量2傳遞給父組件的

子組件

import React from 'react'

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

class EChartsHOC extends React.Component {

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

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

            // ECharts 樣式
            optionECharts: {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>: {c} (cqdtdgtli%)"
                },

                series: [
                    {
                        name:'訪問來(lái)源',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                            {value:335, name:'直接訪問'},
                            {value:310, name:'郵件營(yíng)銷'},
                            {value:234, name:'聯(lián)盟廣告'},
                            {value:135, name:'視頻廣告'},
                            {value:1548, name:'搜索引擎'}
                        ]
                    }
                ]
            }
        }

        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)
    }


    componentDidMount() {
        //this._init();
    }

    render() {
        var divStyle ={

        }
        變量1
        變量2
        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>
        )
    }
}

EChartsHOC = Foundation(EChartsHOC);

export default EChartsHOC;

父組件

import React from 'react'

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

class EChartsHOC extends React.Component {

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

            // 彈出層
            extendStyle:{
                className: 'extend-dataECharts',
                width: 300,
                height:300,
                position: 'absolute',
                left:變量1,
                top:變量2,
                display: 'block'
            },

            // ECharts 樣式
            optionECharts: {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>: {c} (cqdtdgtli%)"
                },

                series: [
                    {
                        name:'訪問來(lái)源',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                            {value:335, name:'直接訪問'},
                            {value:310, name:'郵件營(yíng)銷'},
                            {value:234, name:'聯(lián)盟廣告'},
                            {value:135, name:'視頻廣告'},
                            {value:1548, name:'搜索引擎'}
                        ]
                    }
                ]
            }
        }

        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 => {
            // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
            var myChart = echarts.init(doc);
            // 指定圖表的配置項(xiàng)和數(shù)據(jù)
            var option = this.state.optionECharts;
            // 使用剛指定的配置項(xiàng)和數(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>
        )
    }
}

EChartsHOC = Foundation(EChartsHOC);

export default EChartsHOC;
回答
編輯回答
離殤

一樓說(shuō)得對(duì),父組件傳一個(gè)鉤子函數(shù),子組件調(diào)用

父組件

/**
* @param 子組件傳進(jìn)來(lái)的參數(shù)
*/
onDataChange = (param) => {

}

<子組件 onDataChange={this.onDataChange}/>
2017年4月12日 01:28
編輯回答
法克魷

父組件傳入一個(gè)函數(shù),在子組件調(diào)用的時(shí)候吧數(shù)據(jù)作為參數(shù)

2018年5月11日 02:40