2018-09-18 react学习(二):props & state

在搭建后的react环境下进入src/index.js文件中写业务:

1.引入react & react-dom两个包

image.png

通过console.log我们发现reactdome自带了一个renderAPI,我们可以通过该api来传递并渲染:
语法:
ReactDom.render(jsx元素,注入点,回调)
eg:

image.png

效果如下:

image.png

添加多个元素语法(一定要有根元素包裹,不然报错):

image.png

组件

react创建组件其实就是创建一个普通的类,但是必须要有继承。

语法:

class 组件名 extends React.Component{
constrctor(props){
super(props)
this.state={
本地状态}}
render(){
returen html/jsx
}
render -专门负责渲染render函数的UI,当别人试用这个组件的时候,render在虚拟dom中渲染
真实dom的渲染只有可能出现在reactdom,它是 浏览器主入口

tips:组件变量名和组件名首字母大写

eg:

tips:一定要有render和return
image.png

or

image.png

效果:

image.png

组件嵌套:

import React from ‘react’;
import ReactDom from ‘react-dom’;
let ele=<div>hello</div>;
class App extends React.Component{
render(){
return (<div>
<Header></Header>
<Wrap></Wrap>
<Footer></Footer>
</div>); }}
class Header extends React.Component{
render(){return (<div>这是header组件</div>)}}
class Wrap extends React.Component{
render(){return (<div>这是wrap组件</div>)}}
class Footer extends React.Component{
render() {return (<div>这是footer组件</div>); }}
ReactDom.render(
<App></App>,
document.querySelector(‘#root’));

效果:
image.png

props:

tips: json数据的传递
image.png
效果:
image.png

state:

es6

image.png
效果:
image.png

es7(不需要构造器)

image.png

state 特殊数据类型

tips:《转义输出》
<div dangerouslySetInnerHTML={{__html:this.state.strong}}> </div>

import React from ‘react’;
import ReactDom from ‘react-dom’;
class App extends React.Component{
state={
msg:”ok”,
strong:'<strong>加粗</strong>’ };
render(){
return (
<div>
<h3>{this.props.title}</h3>
<div dangerouslySetInnerHTML={{__html:this.state.strong}}>
</div>
</div>); }}
ReactDom.render(
<App/>,
document.querySelector(‘#root’));

效果:
image.png

定义实例方法:

image.png

image.png
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论
个人博客 论坛专区 主机两折 爆款主机
关注我们
  • 官方客服:289553844一键联系
  • 扫一扫加公众号
    扫一扫加小程序