React-Day3

dangerouslySetInnerHTM

富文本渲染

import React, { Component } from 'react'
​
export default class App extends Component {
  state={
      htmlcode:'<h1>11111</h1>'
  }
  render() {
    return (
      <div>
          <span dangerouslySetInnerHTML={
              {
                  __html:this.state.htmlcode
              }
          }>
​
          </span>
      </div>
    )
  }
}
​

案例影院查询

采用较为笨拙的方法编写模糊查询以及实现过滤渲染

网页数据获取：network fetch/XHR 注意观察请求头部的信息

import React, { Component } from 'react'
import axios from 'axios'
​
export default class Cinema extends Component {
  constructor(){
      super()
      this.state={
          cinemaList:[],
          bakcinemaList:[]
      }
    //   axios.get('https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=5734750').then(res=>console.log(res))
    axios({
        url:'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=5734750',
        method:'get',
        headers:{
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16477603447214621639311361","bc":"110100"}',
            'X-Host': 'mall.film-ticket.cinema.list'
        }
    }).then(res=>{
        console.log(res.data.data.cinemas)
        this.setState({
            cinemaList:res.data.data.cinemas,
            bakcinemaList:res.data.data.cinemas
        })
    })
  }
  render() {
    return (
      <div>
          <input onInput={this.handleInput}/>
         
             {
                 this.state.cinemaList.map(item=>
                     <dl key={item.cinemaId}>
                         <dt>{item.name}</dt>
                         <dd>{item.address}</dd>
                     </dl>
                 )
             }
        
      </div>
    )
  }
  handleInput=(event)=>{
      console.log(event.target.value)
​
      let newlist = this.state.bakcinemaList.filter(item=>item.name.toUpperCase().includes(event.target.value.toUpperCase()))
      console.log(newlist)
      this.setState({
          cinemaList:newlist
      })
  }
}
​

setState

import React, { Component } from 'react'
​
export default class App extends Component {
  state={
      count:1
  }
  render() {
    return (
      <div>
          {this.state.count}
          <button onClick={this.handleAdd1}>Add+1</button>
          <button onClick={this.handleAdd2}>Add+1</button>
      </div>
    )
  }
  handleAdd1=()=>{
      this.setState({
          count:this.state.count+1
      },()=>{console.log(this.state.count)})
      //下面这个不会+1
      this.setState({
        count:this.state.count+1
    },()=>{console.log(this.state.count)})
    //setState是异步
    //setState异步更新状态，更新真实dom
  }
  handleAdd2=()=>{
      setTimeout(()=>{
        this.setState({
            count:this.state.count+1
        })
        this.setState({
          count:this.state.count+1
      })
      },0)
  }
}
//setState处在同步的逻辑中，异步更新状态，更新真实DOM
//setState处在异步的逻辑中，同步更新状态，同步更新真实DOM
//setState接受第二个参数，第二个参数是回调函数，状态和DOM更新完之后就会被触发
​

属性

父组件

import React, { Component } from 'react'
import Navbar from './Navbar'
export default class App extends Component {
  render() {
    return (
      <div>
          <div>
              <h2>首页</h2>
              <Navbar title="首页" leftshow={false}/>
          </div>
          <div>
              <h2>列表</h2>
              <Navbar title="列表" leftshow={true}/>
          </div>
          <div>
              <h2>购物车</h2>
              <Navbar title="购物车" leftshow={false}/>
          </div>
      </div>
    )
  }
}
​

子组件

import React, { Component } from 'react'
​
export default class index extends Component {
  state={
​
  }
  render() {
    console.log(this.props)
    let {title,leftshow} = this.props
    return (
      <div>
          {leftshow && <button>返回</button>}
          Navbar--{title}
          <button>Home</button>
      </div>
    )
  }
}
​