React 问题总结

最新推荐文章于 2021-05-28 17:25:10 发布

DY_浅陌初心

最新推荐文章于 2021-05-28 17:25:10 发布

阅读量797

点赞数

本文链接：https://blog.csdn.net/qq_41653753/article/details/105344752

版权

1.React报错：The tag is unrecognized in this browser.If you meant to render a React component

import React from 'react';
import ReactDOM from 'react-dom';
import hello from './hello';
ReactDOM.render(<hello/>,document.getElementById('root')
);

原因：此浏览器无法识别标记。如果要呈现react组件，请以大写字母开头。

解决：将组件改成大写的，<Hello/>

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './hello';
ReactDOM.render(<Hello/>,document.getElementById('root')
);

2.写一个添加/删除列表功能

受控组件形式：

列表展示：

使用map((item,index)=><li></li>)

添加

onChange={this.add.bind(this)}

删除

onClick={this.delect.bind(this)}

代码段小部件

非受控组件形式：

import React from 'react'

class hello2 extends  React.Component{
    constructor(props){
        super(props);
        this.state={
            todolist:['你好','他好','她好'],
        }
    }
    add(event){
        alert(this.textInput.value)        
        this.setState({
            todolist:[...this.state.todolist,this.textInput.value]
        }
        )
        event.prevenntDefault()
    }
    render() {
        const{todolist}=this.state
        return (
        <div>
            <form onSubmit={this.add.bind(this)}>
            <p>评论列表：</p>
           <ul>
               {
                 todolist.map((item,index ) => 
                 <p key={index} > {item}</p>
                 )}
           </ul>
            <input type="text" placeholder="添加评论" ref={(textInput)=>{this.textInput=textInput}}></input>
            <button type="submit">添加</button>
            </form>
        </div>)
    } 
}
export default hello2

区别：

受控组件：其值由React控制的输入表单元素称为“受控组件”。

受控组件有两个特点：1. 设置value值，value由state控制，2. value值一般在onChange事件中通过setState进行修改

非受控组件：表单数据由 DOM 处理的组件非受控组件。

非受控组件有两个特点：1. 不设置value值，2. 通过ref获取dom节点然后再取value值

能不用 ref 就不用。特别是要避免用 ref 来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”，不利于我们理解和维护。

3.事件绑定

https://www.jianshu.com/p/f391d8da2ef2

由于class 的方法默认不会绑定this，如果你忘记绑定 this，当你调用这个方法的时候 this的值为 undefined。通常情况下如果不是直接调用，应该为方法绑定this。绑定方式有如下几种：

方式一：
add(){ }

方式二：

在constructor()加：this.add= this.add.bind(this);

add(){ }

方式三：使用箭头函数
add(){ }

方式四：
add=()=>{ }

4.组件之间的通讯

父发送，子接收

父组件： <TodoItem content={item} key={index}></TodoItem>通过content,进行传参

import React from 'react'
import TodoItem from './todoItem'

class hello extends  React.Component{
    constructor(){
        super();
        this.state={
            value:'',
            todolist:['你好','他好','她好'],
            number:0
        }
        this.change=this.change.bind(this);
    }
    add(){
        let value=this.state.value;
        this.setState({
            todolist:[...this.state.todolist,value],
            value:''          
        }
        )
    }
    change(event){
        this.setState({            
            value:event.target.value
        });
    }
    render() {
        const{todolist,value}=this.state
        return (
        <div>
            <p>评论列表：</p>
            <ul>
               {
                 todolist.map((item,index ) => 
                <TodoItem content={item} key={index}></TodoItem>
                 )}
           </ul>
            <input type="text" placeholder="添加评论" value={value} onChange={this.change}></input>
            <button type="reset" onClick={this.add.bind(this)}>添加</button>
        </div>)
    } 
}
export default hello

子组件：通过this.pros.content接收参数

import React from 'react'

class todeItem extends React.Component{
    constructor(){
        super();
    }
    render(){
        return(
        <div>
            {  this.props.content} 
        </div>
        )
    }
}
export default todeItem

子发送，父接收

父组件：获取子组件的参数值，需要先给子组件传递一个方法，该方法为需要参数的方法del={this.delect.bind(this)}

import React from 'react'
import TodoItem from './todoItem'

class hello extends  React.Component{
    constructor(){
        super();
        this.state={
            value:'',
            todolist:['你好','他好','她好'],
            number:0
        }
        this.change=this.change.bind(this);
    }
    add(){
        let value=this.state.value;
        this.setState({
            todolist:[...this.state.todolist,value],
            value:''          
        }
        )
    }
    change(event){
        this.setState({            
            value:event.target.value
        });
    }
    delect(index){
        let todolist=[...this.state.todolist];
         todolist.splice(index,1);
         this.setState({todolist       
        })
    }
    render() {
        const{todolist,value}=this.state
        return (
        <div>
            <p>评论列表：</p>
            <ul>
               {
                 todolist.map((item,index ) => 
                <TodoItem del={this.delect.bind(this)} content={item} key={index} index={index}></TodoItem>
                 )}
           </ul>
            <input type="text" placeholder="添加评论" value={value} onChange={this.change}></input>
            <button type="reset" onClick={this.add.bind(this)}>添加</button>
        </div>)
    } 
}
export default hello

子组件：通过调用父组件传递过来的方法，给父组件相应的方法进行传值 this.props.del(this.props.index);

import React from 'react'

class todeItem extends React.Component{
    del(){
        this.props.del(this.props.index);
    }
    render(){
        return(
        <div onClick={this.del.bind(this)}>
            {this.props.content} -----删除
        </div>
        )
    }
}
export default todeItem

5.axios

 axios.get('/redPacket/list', { params: { miliao: searchParams.miliao, current: searchParams.current, pageSize: searchParams.pageSize } })
        .then((data) => {
          console.log(data)
          data && data.data && data.data.data && data.data.data.list &&
          this.setState({
            data: data.data.data.list,
            total: data.data.data.total
          })
        })

6.`Object.assign()`

Object.assign(target, source)用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

当表单提交时，需要传递参数，可以使用

 this.setState(Object.assign(searchParams, { pageSize: pageSize, current: page }), () => {
                  this.getData()
    })

7.箭头函数

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

8.前端table居中问题

style: { textAlign: "center" }

9.权限问题

if (!hasFun('mcp:redPacket:view')) {

return <h2>您没有权限查看此页面</h2>

}

9.map和forEach

 render (text,index) {
            const time = (text || '').split(' ')
            const elements = time.map((item, index) =>
              <div key={index}>
                {item}
              </div>
            )
            return (
              <div>
                {elements}
              </div>
            )
 }

forEach

render (text,index) {
            const time = (text || '').split(' ')
            const elements = []
            time.forEach((item, index) => {
              elements.push(
                <div key={index}>
                  {item}
                </div>
              )
            })
            return (
              <div>
                {elements}
              </div>
            )
}

DY_浅陌初心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
React 问题总结

1.React报错：The tag is unrecognized in this browser.If you meant to render a React componentimport React from 'react';import ReactDOM from 'react-dom';import hello from './hello';ReactDOM.render(&...
复制链接

扫一扫