react props取不到match_React踩坑小记（一）

比眉伴天荒 2022-10-27 12:23 240阅读 0赞

最近写代码碰到了关于React开发比较多的坑（还是自己水平不到位【手动苦笑】），话不多说，开搞。

##  **1、自定义组件首字母一定要大写** ##

React 组件名称必须具有以大写字母开头，否则组件使用将被视为内置元素，例如`div`或`span`；虽然开始前已经看到了这个，但还是义无反顾的踩进去了，为什么呢？因为在react-router竟然没报错！！！，直到进行组件嵌套，才在父组件中引用子组件时爆出了这个问题。

![2d4b1e1a1bc24bbc16039d74d1555575.png][]

PS：这里更大的问题是把如果把自定义组件命名为 button 或 img。 React 会忽略你的组件，只是渲染一个普通 HTML button 或 img 标签，而且这种情况下，React是不会有任何警告信息提示的。

## **2、使用PropTypes** ##

这个对象已经从React中删除了，不能再使用了，现在需要做的是：

npm install prop-types
           import PropTypes from 'prop-types'

该对象是用来设置从父组件传入的参数的数据类型及是否必填等信息（类似于Vue的props）。

## **3、React及相关插件版本** ##

在开发过程中由于用到的是React版本比较高，生命周期的钩子函数已经出现了更新，由此会爆出一些警告，然后react-router高版本，组件内获取路由参数的时候是this.props.match.params，而在低版本的中文文档上的获取方法是this.props.params.id（并且没有版本说明，略坑）。

## **4、函数以及类**  ##

class Numbers extends React.Component {
         
      const a;
      // ...
    }

上面代码无效，因为在JavaScript类的内部，不能随意定义变量，只能使用规定的语法定义方法和属性。

类语法中使用的\{\}看起来像块级作用域，但它并不是。而在一个函数构成的组件中，想怎么搞就怎么搞，很嗨皮。

## **5、花括号“\{ \}”和圆括号“( )”** ##

return {
         
      something();
    };

和：

return (
      something();
    );

前者返回失败，后者将调用something()函数并返回其返回的值，JSX本身其实也是一种表达式，经过编译后，在JSX中的内容将被转换为普通的JavaScript对象。

还有就是在箭头函数中的使用 ()=>(JSX)等价于 ()=>\{return (JSX);\}，不要使用()=>\{JSX\}。

## **6、state以及普通的class实例属性** ##

state实例属性是一个特殊属性，React会管理它，且只能通过setState()进行修改，且此时React会重新调用render渲染组件。

而其他普通的实例属性的修改对组件的实时渲染是没有任何影响的，即无法触发React的渲染机制。

## **7、this指向问题** ##

*  类方法可以使用箭头函数，从而解决类方法中调用组件的this对象；
 *  通过this.func.bind(this)实现在类方法中调用组件的this对象；

![dda22daa0fac683f06555f193d21183d.png][]

## **8、constructor构造函数** ##

在constructor()函数中**不要调用setState()方法**。如果你的组件需要使用内部state，请直接在构造函数中为**this.state赋值初始state：**

![54ebd3b2cd98ed927c5021e08038f170.png][]

只能在构造函数中直接为this.state赋值。如需在其他方法中赋值，你应使用this.setState()替代。

要避免在构造函数中引入任何副作用或订阅。如遇到此场景，请将对应的操作放置在componentDidiMount中。

**注意：避免将props的值赋值给state！这是一个常见的错误：**

![b470169bceda6af5d7d7edd0367d007c.png][]

如此做毫无必要（你可以直接使用this.props.color），同时还产生了bug（更新prop中的color时，并不会影响state）。

只有在你刻意忽略prop更新的情况下使用。此时，应将prop重命名为initialColor或defaultColor。必要时，你可以修改它的key，以强制“重置”其内部state。

[2d4b1e1a1bc24bbc16039d74d1555575.png]: /images/20221024/a3c73be85e3843158383a2d01fedad4d.png
[dda22daa0fac683f06555f193d21183d.png]: /images/20221024/74a5db8a872846e4932f32ec5189d635.png
[54ebd3b2cd98ed927c5021e08038f170.png]: /images/20221024/7eb1a6ab34934cdb85dc8fb65fe4be23.png
[b470169bceda6af5d7d7edd0367d007c.png]: /images/20221024/e0f46ee9ab5a498fa9aadb40a378482c.png