react - JSX踩坑记 | 易学教程

1、在 JSX 中，注释的写法：

NO1

<Fragment>
    {/* 正确注释的写法 */}
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>

NO2

<Fragment>
    {
        //正确注释的写法 
    }
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>

2、html 标签上的 class 需写为 className，否则控制台会出现警告

3、JSX 中的 HTML 解析问题
如果想在文本框里输入一个 h1 标签，并进行渲染。默认是不会生效的,可以使用 dangerouslySetInnerHtml 属性解决，代码如下：

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                    dangerouslySetInnerHTML={{__html:item}} 
                >
                </li>
            )
        })
    }
</ul>

以上做法就可以实现 HTML 的直接输出。

4、JSX 中 label 标签的坑
label 标签的 for 属性必须写为 htmlFor。

5、React 组件名，必须大写字母开头。

6、react 父组件向子组件传值，靠属性的形式传递。
父组件：

<XiaojiejieItem content={item} />

子组件：

import React, { Component } from 'react'; //imrc
class XiaojiejieItem  extends Component { //cc

    render() { 
        return ( 
            <div>{this.props.content}</div>
         );
    }
}

export default XiaojiejieItem;

7、react 子组件向父组件传值。
react 规定，子组件里不能直接操作父组件里的数据，需要借助一个父组件的方法，来修改父组件的内容。然后在子组件调用父组件的方法。

8、函数式编程的好处：
（1）、函数式编程让我们的代码更清晰，每一个功能都是函数。
（2）、函数式编程为我们的代码测试代理了极大的方便，更容易实现前端自动化测试。

9、react 组件间传值，校验限制，使用 PropTypes

	父组件中引入 PropTypes

import PropTypes from 'prop-types'

引入后，就可以在组件的下方进行引用了，需要注意的是子组件的最下面（不是类里面），写入下面的校验传值代码：

XiaojiejieItem.propTypes={
	con : PropTypes.string,		//字符串
	index : PropTypes.number,	//数字
	deleteItem : PropTypes.func	//方法
}

如果传值类型错误，会报错如下：

Warning: Failed prop type: Invalid prop `index` of type `number` supplied to `XiaojiejieItem`, expected `string`.
    in XiaojiejieItem (at Xiaojiejie.js:28)
    in Xiaojiejie (at src/index.js:5)

必传值的校验 isRequired

avname:PropTypes.string.isRequired

使用默认值 defaultProps

default可以实现默认值的功能，比如现在把avname 的默认值设置成“肖战”，然后把 avname 的属性删除掉

XiaojiejieItem.defaultProps = {
    avname:'肖战'
}

来源：CSDN

作者：qq_39920109前端小菜鸟

链接：https://blog.csdn.net/qq_39920109/article/details/103868415

标签

react

jsx

前端组件

bind