1.怎么创建组件?
import React, { Component } from 'react' // react组件是一个class类 // 组件需要通过这个类实例化构建 // class App extends React.Component{ // } class App extends Component{ constructor(){ super(); //定义组件的属性 this.state = { message: 'hello react' } } // 必须实现由父类继承的render函数 render(){ //需要向外return组件的dom return ( <div> <h1>这是app组件</h1> <p>{this.state.message}</p> <button onClick={()=>{ console.log('点击了'); // 修改state this.setState({message: 'hello world'}); }}>按钮</button> </div> ); } } // 向外输出app export default App;
2.React组件也是一个函数
import React, { Component } from 'react' // react组件是一个函数 function App(){ // 返回组件dom结构 return ( <div id="app"> <h1>hello react!</h1> </div> ) } export default App;