1-6 state与绑定事件

画不完的饼

已于 2022-08-15 16:09:38 修改

阅读量103

点赞数

分类专栏： React 文章标签： javascript 前端 react.js

于 2022-07-26 13:54:40 首次发布

本文链接：https://blog.csdn.net/weixin_39162041/article/details/125993152

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该博客展示了如何在React中创建一个基本的组件——Wather，该组件根据state的isHot属性显示不同的天气描述。当用户点击<h1>标签时，会触发一个名为demo的函数并在控制台打印'被点击了'。React组件使用了Babel进行转换，并通过ReactDOM.render()方法挂载到id为'test'的DOM元素上。

摘要由CSDN通过智能技术生成

React依赖包我已上传地址如下：https://download.csdn.net/download/weixin_39162041/86264167

	<script type="text/babel" > /* 此处一定要写babel */
        class Wather extends React.Component{
            constructor(props){
            //实例三大元素props
            //1.继承过来的属性，必须调用super()
            //2.state默认是一个空对象、
            //3.给元素绑定事件要使用花括号。不要加小括号，尽量减少document.getElementById这种方法的使用
                super(props)
                this.state = {isHot:true}
            }
            render(){
                return <h1 onClick={demo}>今天天气很{this.state.isHot ?'炎热':'凉爽'}</h1>
            }
        }
        ReactDOM.render(<Wather/>,document.getElementById('test'))
        function demo(){
            console.log('被点击了');
        }
	</script>