在react中怎么快速创建组件?

在react中怎么快速创建组件?下面本篇文章给大家介绍一下React中创建组件的几种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

React中创建组件的方式

创建react组件的方式有三种:

1、函数式定义(无状态组件)

function MyComponent(props){
  return(
       <h1>mycomponent</h1>
    )
}

2、es5原生方式React.createClass定义组件

 const MyComponent=React.createClass({
        render:function () {
            return <h1>mycomponent</h1>
        }
    })

3、es6形式的extends React.Component定义组件(有状态组件)

class MyConponent extends React.Component{
        constructor(props){
            super(props);
        }
        render() {
            return (
                <h1>mycomponent</h1>
            );
        }
    }

注意:无论使用哪种方式创建组件,组件名称的首字母都必须大小,因为我们写的是JSX,最后是需要通过babel转义成es5的语法的,而babel在进行转义JSX语法时,是调用了 React.createElement() 这个方法,这个方法需要接收三个参数:type, config, children。

第一个参数声明了这个元素的类型,当创建自定义组件时没有首字母小写时, 而 babel 在转义时把它当成了一个字符串 传递进去了;当首字母大写时,babel 在转义时传递了一个变量进去。

问题就在这里,如果传递的是一个字符串,那么在创建虚拟DOM对象时,React会认为这是一个原生的HTML标签,但是这显然不是一个原生的HTML标签,因此去创建一个不存在的标签肯定是会报错的。

如果首字母大写,那么就会当成一个变量传递进去,这个时候React会知道这是一个自定义组件,因此他就不会报错了。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是在react中怎么快速创建组件?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏