報錯：cannot read property 'style' of undefined

問題一

報錯

問題二

{...this.props} 這個是什么意思

 <Screen style={{ width: 1920, height: 1080 }} {...this.props}>

源碼

import React from 'react';

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

    render() {


        const { width = 1920, height = 1080 } = this.props.style || {};

        // this.props.children  表示組件的所有子節(jié)點
        const childrenStyle = this.props.children.props.style || {};
        this.props.children.props.style = { height, width, ...childrenStyle };

        return (
            <div className={'screen'}>
                {this.props.children}
            </div>
        )

    }
}

export default Screen;

import React from 'react';
import Screen from './components/screen';

import './assets/styles';


class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mapPoint: [],
            area: [],
            bar: []
        };
    }

    render() {

        return (
            <Screen style={{ width: 1920, height: 1080 }} {...this.props}>
                <div>思考思考</div>
                <div>瞬間即逝</div>
                <div>阿達(dá)瓦得</div>

            </Screen>
        )
    }

    componentDidMount() {
        var varTest = 'test var OK';
        let letTest = 'test let OK'; // 綁定這個區(qū)域，不再受外部的影響
        {
            varTest = 'varTest change'
            let letTest = 'letTest change'
        }
        console.log(varTest);
        console.log(letTest);
    }
}



export default Component;