React基础——组件状态state、属性props

import React from 'react';  // 此句不能少
import ReactDom from 'react-dom';class Taggle extends React.Component{state = {flag: true}handleClick(e){e.preventDefault()  // 阻止默认行为，要放在开头console.log(e);console.log(e.target);  // target为html标签// this.state.flag = !this.state.flag;  // 修改state状态this.setState({flag: !this.state.flag})  // 官方推荐这样修改state}render(){return <div id="t1" onClick={this.handleClick.bind(this)}>  {/*必须bind，不然this没有定义*/}{this.state.flag.toString()}  {/*注意必须转换成字符串*/}</div>}
}
class Sub extends React.Component{  // 子组件render(){// return <span>sub element ==== {'2>1?true:false'}</span>  // true和false打印不出来，必须改为字符串return <span>sub element ==== {true.toString()}</span>}
} // class component,类名必须是大驼峰，所有标签必须封口，单标签也得封口，所有标签都是小写
class App extends React.Component{  // First就是组件，就是元素，组件名第一个字母必须大写开头state = {  // state是一个对象,state的变化会影响render函数的执行p1: 'Curry',p2: '.Klay'}// render组件的渲染函数render(){console.log('~~~~~~~~~~~~~')//this.state.p1 = 'Warriors'  // 修改了p1的内容，但是不建议这样修改// this.setState({p1: 'Warriors'})  // 放在这里会递归setTimeout(() => this.setState({p1: 'Warriors'}), 3000)  // 注意这里还是有递归的，只是后来虚拟DOM没有改变，浏览器没有重新渲染// return <div>App Component <br /><Sub /></div>;  // 只能有一个顶级元素return <div>{this.state.p1}{this.state.p2}<hr /><Taggle />  </div>}
}
class Second extends React.Component{  // First就是组件，就是元素// render组件的渲染函数render(){return React.createElement('div', null, 'test string');}
}

import React from 'react'
import ReactDom from 'react-dom'class Toggle extends React.Component{constructor(props){super(props)this.state = {flag: true,count: 0}}// state = {//     flag: true,//     count: 0// }handleClick(e){// console.log(e)// console.log(e.target)  // target为id=t1的div标签// console.log(this)// // this.setState({flag: !this.state.flag})this.setState({count: this.state.count + 1})}// handleOver(e){//     this.setState({count: this.state.count + 1})// }render(){console.log('render taggle')return <div id='t1' onClick={this.handleClick.bind(this)} style={{backgroundColor: '#FFF', padding: '5px'}}>{/* 一定要用bind绑定this，否则直接结果是undefined，参考之前篇幅的this的坑 */}{/* style标签里第一大括号是表达式，第二个大括号是对象 */}{this.state.flag.toString()}---{this.state.count}  <br />{this.props.name}{this.props.parent.state.myname}<br /><br />{this.props.children} {/* 可以拿到Toggle的所有子标签的内容 */}</div>}
}
// props属性在内部是只读属性，不能修改，要想修改，需要从外部注入class App extends React.Component{constructor(props){super(props)  // 必须调用super父类构造器，否则报错this.  state = {  // 类中定义state// p1: 'Curry',// p2: '.Klay',childName: 'Curry',myname: '.warriors',count: 0}}// state = {//     // p1: 'Curry',//     // p2: '.Klay',//     childName: 'Curry',//     myname: '.warriors',//     count: 0// }handleClick(e){// this.setState({childName: this.state.childName + '1'})this.setState({count: this.state.count + 1})}render(){console.log('APP render')setTimeout(() => this.setState({p1: 'Warriors'}), 3000);  // 每隔3秒return <div onClick={this.handleClick.bind(this)} style={{backgroundColor: '#f0f0f0', padding: '5px'}}>{/* {this.state.p1}{this.state.p2} */}{/* child's name = {this.state.childName} */}count = {this.state.count}<hr /><Toggle  name={this.state.childName} parent={this}> {/* 自定义了两个属性通过props传给Toggle组件对象 */}<span>金州拉文</span><br /><a href="#test">勇士总冠军（我是锚点）</a>  {/*a和span标签是Toggle的子元素 ，子元素通过props.children访问*/}</Toggle></div>}
}ReactDom.render(<App />,document.getElementById('root')
)

React基础——组件状态state、属性props相关推荐

React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
[react] react组件的state和props两者有什么区别？
[react] react组件的state和props两者有什么区别? State 是一种数据结构,用于组件挂载时所需数据的默认值.State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件 ...
[react] 在React中组件的state和setState有什么区别？
[react] 在React中组件的state和setState有什么区别? state:初始化状态 setState:对状态进行更新个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
[react] 给组件设置很多属性时不想一个个去设置有什么办法可以解决这问题呢？
[react] 给组件设置很多属性时不想一个个去设置有什么办法可以解决这问题呢? es6展开运算符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
react基础入门，类组件和函数组件，state，props，refs
React入门目录 React入门 React入门 Vue跟React的异同点相同点不同点 Vue小建议 1. 不需要响应式的数据应该怎么处理? 2. Key 3. 数据结构 React 教程 ...
React学习：状态(State) 和属性(Props)
React :元素构成组件,组件又构成应用. React核心思想是组件化,其中组件通过属性(props) 和状态(state)传递数据. State 与 Props 区别 props 是组件对外 ...
尚硅谷笔记——React组件的三大属性props、state、ref
state 理解 state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新 ...
从 0 到 1 实现 React 系列 —— 组件和 state|props
阅读源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/...) 组件即函数在上一篇 JSX 和 Vir ...
react 子组件获取变量属性值
刚刚遇到一个问题:子组件属性值绑定了变量,但是在子组件的componentDidMoiunt中拿到的值始终是undefinded.如下: 1 <PieInfo 2 title='有效病案' 3 ...

React基础——组件状态state、属性props

React基础——组件状态state、属性props相关推荐

最新文章

热门文章