怎么封装一个按钮的react组件

var navBar = React.createClass({

render: function (){

return <ul>{nav_li}</ul>

}

})12345

createClass创建react组件对应的类，描述组件的各种行为，render函数是必须实现的，表示渲染什么内容

下面来看我们的代码，接着前面封装导航栏组件

nav.js

// 创建组件

var NavBar = React.createClass({

liClick: function () {

alert('组件')

},

render: function(){

return <ul><li><a href="">最新电影</a></li><li><a href="" onClick={function(){alert('组件')}}>最新评论</a></li></ul>

}

})

ReactDOM.render(

// 使用组件

<NavBar />,

document.getElementById("navbar")

)12345678910111213141516

NavBar就是我们定义的组件，使用是方式是<NavBar />

这里我暂时不编译，在页面上引用nav.js

react安装组件命令全局安装create-react-app，执行：npminstall-gcreate-react-app命令进行安装。进入要安装项目的文件夹，执行：npxcreate-react-appreact-blog创建一个react-blog项目。进入项目cdreact-blog，执行：npmrunstart编译启动项目即可此页面会自动开启。在项目src目录创建views文件夹，放置页面组件，这里创建了login和main两个文件夹并创建了对应的。

react动态创建100个组件步骤如下：

1、创建一个HelloComponent.js文件，写入组件。并在App.js中调用HelloComponent组件。

2、在HelloComponent.js文件中分别使用三种方式创建组件。

---