ref绑定、class、value值、列表渲染、dangerouslySetInnerHTML

1、一般针对输入框:

推荐用第二种


通过this.refs.inp可以访问这个input框
即:this.refs.inp.value就是input框里面的内容
 this.inp = el }/>
通过el就会少一层,el代表的就是这个input标签
即:this.inp.value就是input框里面的内容

2、class是原生关键字,写类名用className代替

3、输入框的value使用也会报错,用defaultValue代替

4、列表渲染,注意加key

import React , { Component } from 'react'

const Item = props => {{/*定义一个函数组件*/}
    return (
        
  • { props.task }
  • ) } class ListLoop extends Component { constructor () {{/*构造器定义状态数据*/} super() this.state = { todos:[ { id:1, task:'任务一', }, { id:2, task:'任务二', }, { id:3, task:'任务三', }, { id:4, task:'任务四', }, ] } } renderItem = () =>{{/*箭头函数返回这个结构*/} return ( {/*{...item}其实是解构,item={item},绑定数据,自己用props接收*/} this.state.todos.map(item=>) ) } render () { return (
      {this.renderItem()}{/*执行函数*/}
    ) } } export default ListLoop

    4、dangerouslySetInnerHTML(通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。

    在显示时,利用dangerouslySetInnerHTML就可以正确解析效果)

    import React, { Component } from 'react';
    
    class Data extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                info:'有斜体效果吗'
            };
        }
        render() {
            return (
                
    {/*要是单标签(双标签试验,也可以),里面写属性,杠杠html后面接状态数据,就可以解析标签了*/}
    ); } } export default Data;

    你可能感兴趣的:(React)