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

人已赞赏
干货分享

分享app|这样的小众有格调的你听说了吗

2018-9-17 22:02:00

干货分享

想知道高逼格的短视频是怎么制作的吗?

2018-9-18 16:15:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索