码迷,mamicode.com
首页 > 其他好文 > 详细

this.props.children 踩坑

时间:2018-09-22 15:58:20      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:extends   code   问题   asc   from   dex   err   ext   info   

问题:

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
// import {BrowerRouter as Router,Switch,Route,Link} from ‘‘;

// import Home from ‘page/home/index.jsx‘;
class A extends React.Component {
	constructor (props){
		super	(props)

	}
	render(){
		return <div>component A</div>

	}
}
class B extends React.Component {
	constructor (props){
		super	(props)
	}
	render(){
		return <div>component B</div>

	}
}
//容器
class Wrapper extends React.Component {
	constructor(props){
		super	(props)
	}

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

	}
}

ReactDOM.render(
	<Wrapper>
		<A/>
		<B/>
	<Wrapper/>,
	document.getElementById(‘app‘)
)

报错:

技术分享图片

排除了一下错,原来是因为:

wrapper的闭合标签写错了。

正确的写法应该是:

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
// import {BrowerRouter as Router,Switch,Route,Link} from ‘‘;

// import Home from ‘page/home/index.jsx‘;
class A extends React.Component {
    constructor (props){
        super    (props)

    }
    render(){
        return <div>component A</div>

    }
}
class B extends React.Component {
    constructor (props){
        super    (props)
    }
    render(){
        return <div>component B</div>

    }
}
//容器
class Wrapper extends React.Component {
    constructor(props){
        super    (props)
    }

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

    }
}

ReactDOM.render(
    <Wrapper>
        <A/>
        <B/>
    </Wrapper>,
    document.getElementById(‘app‘)
)

 

this.props.children 踩坑

标签:extends   code   问题   asc   from   dex   err   ext   info   

原文地址:https://www.cnblogs.com/ipoodle/p/9690155.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!