鍍金池/ 問答/HTML/ react 高階組件無法傳值怎么辦?想把BarAA的defaultProps傳遞

react 高階組件無法傳值怎么辦?想把BarAA的defaultProps傳遞給Foundation但是無法實現(xiàn)

import React from 'react'

import { Foundation } from './foundation'


class BarAA extends React.Component {

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

    defaultProps = {
        autoPlay: false,
        maxLoops: 10
    }

    render() {

        return (
            <div>baraaaaaaa</div>
        )
    }
}

BarAA = Foundation(BarAA);

export default BarAA;

import React from 'react';

// HOC 工廠實現(xiàn)方法

export const Foundation = (WrappedComponent) => {

    class NewComponent extends React.Component {
        constructor() {
            super();
        }

        _init() {
            // 參數(shù)設(shè)置
            var doc = document.getElementById('ec');
            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 => {
                // 基于準(zhǔn)備好的dom,初始化echarts實例
                var myChart = echarts.init(document.getElementById('ec'));
                // 指定圖表的配置項和數(shù)據(jù)
                var option = optionECharts;
                // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
                myChart.setOption(option);
            }).catch(error => 'An error occurred while loading the component');
        }



        componentDidMount() {
            console.log(this.defaultProps.maxLoops)
            this._init()
        }


        componentWillMount() {

        }

        render() {
            return (
                <div>
                    <WrappedComponent { ...this.props } />
                </div>
            )
        }
    }

    return NewComponent

}

export default Foundation;

圖片描述

修改了一下,依然找不到那個屬性

圖片描述

import React from 'react'

import { Foundation } from './foundation'


class BarAA extends React.Component {

    constructor() {
        super();
        //localStorage.username='再見';
        this.state = {
            defaultProps: {
                autoPlay: false,
                maxLoops: 10
            }
        }
    }


    render() {

        return (
            <div>baraaaaaaa</div>
        )
    }
}

BarAA = Foundation(BarAA);

export default BarAA;

import React from 'react';

// HOC 工廠實現(xiàn)方法

export const Foundation = (WrappedComponent) => {

    class NewComponent extends React.Component {
        constructor() {
            super();
        }

        _init() {
            // 參數(shù)設(shè)置
            var doc = document.getElementById('ec');
            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 => {
                // 基于準(zhǔn)備好的dom,初始化echarts實例
                var myChart = echarts.init(document.getElementById('ec'));
                // 指定圖表的配置項和數(shù)據(jù)
                var option = 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","./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(obj[name].key);
                        }
                    }
                };

            }
        }

        componentDidMount() {

            this._init()
        }


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


        render() {
            return (
                <div>
                    <WrappedComponent/>
                </div>
            )
        }
    }

    return NewComponent

}

export default Foundation;
回答
編輯回答
維她命

<WrappedComponent { ...this.props } /> 你這里不用寫啊,WrappedComnponent 本身就會有props,無需傳遞的。你本來就是default props

2017年9月24日 05:11
編輯回答
念舊

這種不是用props傳遞的嗎?

import React from 'react'

import { Foundation } from './foundation'


class BarAA extends React.Component {

    constructor() {
        super();     
        this.state = {
         defaultProps = {
        autoPlay: false,
        maxLoops: 10
    }
        }
    }
    render() {

        return (
            <div>
            <Foundation  defaultProps={this.state.defaultProps}/>
            </div>
        )
    }
}
export default BarAA;
2017年12月29日 17:25
編輯回答
獨特范
import React from 'react'

import { Foundation } from './foundation'


class BarAA extends React.Component {

    constructor() {
        super();
        //localStorage.username='再見';
        this.state = {
            optionECharts: {
                title: {
                    text: 'ECharts 開始我的世界'
                },
                tooltip: {},
                legend: {
                    data: ['銷量']
                },
                xAxis: {
                    data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子", "無敵"]
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20, 90]
                }]
            }
        }
    }

    render() {

        return (
            <div>baraaaaaaa</div>
        )
    }
}

BarAA = Foundation(BarAA);

export default BarAA;

import React from 'react';

// HOC 工廠實現(xiàn)方法

export const Foundation = (WrappedComponent) => {

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

        _init() {
            // 參數(shù)設(shè)置
            var doc = document.getElementById('ec');
            /*
            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 => {
                // 基于準(zhǔn)備好的dom,初始化echarts實例
                var myChart = echarts.init(document.getElementById('ec'));
                // 指定圖表的配置項和數(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","./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(obj[name].key);
                        }
                    }
                };

            }
        }

        componentDidMount() {

            this._init()
        }


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


        render() {

            const newProps = {
                name: "cqm",
                value: "testData",
            }

            return (
                <div>
                    <div id={'ec'} style={{width: 500, height: 500}}></div>
                    <WrappedComponent {...this.props} {...newProps}/>
                </div>
            )
        }
    }

    return NewComponent

}

export default Foundation;

2017年12月12日 13:01