react初涉到的坑(长期记录)

最新推荐文章于 2024-06-19 17:10:03 发布

原创最新推荐文章于 2024-06-19 17:10:03 发布 · 置顶 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

9 篇文章

订阅专栏

本文围绕React开发展开，介绍了JSX语法闭合标签、标签属性使用、事件绑定差异、表单传参、操作DOM元素等方面的问题及解决办法。还提及了控制台报错原因，如未加return、属性值格式错误等，同时说明了dangerouslySetInnerHTML属性的用法和风险。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建组件渲染中用的JSX语法一定别忘记闭合标签（在body html处不需要闭合标签，平时也习惯了）！！！最好编辑器装个JSX语法插件。例子：“ embedded: Expected corresponding JSX closing tag for …”

2.在标签里的for不能在正常使用了，而是要写成htmlFor。
3.绑定事件的差异：
vue : v-on:click=“goBack”/ @click="“goBack” —(双引号);
angular :ng-click=“goBack()” ----（ng里面要加 ‘()’,双引号）；
react : 基本用的是JSX语法，onChange={this.goBack} ----( ‘{}’ )；
js: οnclick=“goBack()”；
jquery : $(“p”).click();

4.表单的传参问题，这真是个大坑，跟着视频学习的时候没理解，然后敲代码思考找资料才整明白；如图input中绑定了onChange函数用bind绑定传参，其中(this)只是绑定上this指向，实际传的参数只有后面的'username'字符串，在handleChange函数定义中默认有event事件对象(原因event对象也会在绑定函数的传输后面默认传入。)，就此才搞懂的，浓重记一笔！
传参的两种方式：回调形式与bind()形式传参，直接绑定加()传参默认调用

<li key={index} onClick={()=>this.props.delitem(index)}>{item}</li>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

在这里插入图片描述
5、操作dom元素，需给元素设置ref属性，用this.refs.xxx就可以返回真实的DOM节点(ReactDOM.findDOMNode(this.refs.xxx))；由于this.refs.[refName]属性获取的是真实DOM，所以必须得到虚拟DOM插入文档以后，才能使用这个属性，否则会报错
末：如果有哪里不对的地方，还望指出一下，超级感谢！
6、控制台报此错误，react-dom.development.js:14638 Uncaught Error: ComList(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
未加return
7、Fragment标签是react的，使用时候要么引入/或者就React.Fragment使用
8、<input type="text" name="fuwu" value={this.state.inputValue} onChange={()=>{this.handlerInput}} />该代码报Expected an assignment or function call and instead saw an expression no-unused-expressions注意jsx语法中箭头函数不要使用{}或者加return
9、注意表单绑定不用bind的用箭头函数话要传event（不自动传的）
箭头函数写法<input type="text" name="fuwu" value={this.state.inputValue} onChange={(event)=>this.handlerInput(event)} /> 箭头函数的写法一定要加()
bind写法：<input type="text" name="fuwu" value={this.state.inputValue} onChange={this.handlerInput.bind(this)} />
`
10、

 var dellist=this.state.list;
        dellist.splice(index,1);//splice()从那里开始，截取几个图中意思为删除起始下标为1，长度为1的一个值
        this.setState({list:dellist})
        /*
        注意：记住React是禁止直接操作state的 ,虽然这种方法看着也行，但是在后期性能优化上会有很多麻烦，所以一定不要这样操作
            this.state.list.splice(index,1)
            this.setState({list:this.state.list})
        */

11、在使用dangerouslySetInnerHTML属性的时候控制台报这个错``props.dangerouslySetInnerHTMLmust be in the form{__html: …}`检查**__html**是否写错，两道下划线、__html的值是否不合格式
React用dangerouslySetInnerHTML动态渲染HTML:用法


 - {  this.state.list.map((item,index)=>{return <li key={item+index}
   onClick={()=>this.deletelist(index)}
   dangerouslySetInnerHTML={{__html:`<h2>${item}</h2>`}}></li>})
    }
 - <div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />
 - <div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />

原理：
1.dangerouslySetInnerHTMl 是React标签的一个属性，类似于angular的ng-bind；
2.有2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;
3.既可以插入DOM，又可以插入字符串；
4.不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的，以此来警告，它的 prop 值（一个对象而不是字符串）应该被用来表明净化后的数据。
相关资料：
http://wiki.jikexueyuan.com/project/react/dangerously.html
12、组件ui层与js层拆分的时候，倒序删除功能的index有问题，打印不对
注意：该问题是index形参这样写，被重新声明了，导致传的index不正确

原代码：
<List
    bordered
    dataSource={this.props.list}
    renderItem={(item,index)=>(<List.Item onClick={(index)=>{this.props.deleteItem(index)}}>{item}</List.Item>)}
/>

<List
    bordered
    dataSource={this.props.list}
    renderItem={(item,index)=>(<List.Item onClick={()=>{this.props.deleteItem(index)}}>{item}</List.Item>)}
/>