自己经常会出现下面两个问题有点不明白还望指点。这种报错是什么意思呢？

第一个问题，自己在把父文件内容引到子文件中，子文件经常会少了div。

子文件内容这样

 return  （ this.props.number） 会显示图片中的报错，报错这个是什么意思，发现效果照样可以实现。

第二个问题，上面那个可以写成return  （{this.props.number}）吗？

这是最后的正确方式 return(  <div> {this.props.number} </div> ) 和上面区别就多了一个<div>包裹。

父文件

import React,{Component,Fragment} from 'react';

import { Child } from "./Child";

class Count extends Component{

    constructor(props){

        super(props);

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

        this.state={

            Count:1,

            button:'增加'

        }

    }

    handleClick(){

      this.setState({Count:this.state.Count+2})

    }

    render(){

        return(

            <Fragment>

                {/* 先要获取数据才能在点击事件中改变数据 */}

                <button onClick={this.handleClick}

                >{this.state.button}</button>

                <div>

                    <Child

                    number={this.state.Count}

                 />

                </div>  

            </Fragment>

        )

    }

}

export {Count};

子文件

import React,{Component} from 'react';

class Child extends Component{

    render(){

        return(

            this.props.number

        )

    }

}

export{ Child};

在这里输入代码，可通过选择【代码语言】突出显示