react 报错 Consider adding an error boundary to your tree to customize error handling behavior.

最新推荐文章于 2024-02-01 10:33:16 发布

reg183

最新推荐文章于 2024-02-01 10:33:16 发布

阅读量9k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chendongpu/article/details/116045723

版权

React 编程错误小括号渲染组件

关键词由CSDN通过智能技术生成

前端专栏收录该内容

255 篇文章 3 订阅

订阅专栏

今天写个小例子一直报这个错，我也搞得有些莫名其妙

仔细检查了一些reder方法的返回值少了一对小括号

加上了小括号之后运行正常。

写程序的真的不能麻痹大意啊。

注意：

小括号不能这么写，这么写一样报错

一定要这么写才不报错

不知道这里面有什么玄机，

效果如下：

完整的代码粘贴如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component{

    constructor(props){
        super(props);
        this.state={
            date:(new Date().toLocaleTimeString())
        }
    }

    componentDidMount(){
        this.timer = setInterval(function(){
            this.setState({
                date:(new Date().toLocaleTimeString())
            });
        }.bind(this),1000);
    }

    render (){
        const {date}=this.state;
        console.log("date:",date);
        return (
            <div>
                <h2>现在是{date}</h2>
            </div>);
    }
    
}

ReactDOM.render(
    <Clock />,
    document.getElementById('example')
);
</script>
 
</body>
</html>