props属性:
我使用代码来说明React中props属性:
// Profile.jsx import React from ‘react‘ ; export default Class Profile extends React.Component { // render 是这个组件渲染的Vitrual DOM结构 render() { return ( <div className-"profile-component"> </*this.props就是传入的属性*/> <h1>my name is {this.props.name}</h1> <h2>my age is {this.props.age}</h2> </div> ) } }
用这种方式,就实现了一个React的组件,在其他的组件中,可以像HTML标签一样引用它。有了组件以后,可以使用React提供的另外一个库ReactDOM把这个组件挂载到DOM节点上。
// app.jsx import { render } from ‘react-dom‘; import Profile from ‘./profile‘; render(<Profile name="lewis" age=26 />, document.getElementById(‘app‘)); // 或者可以使用...属性拓展 const props = { name: ‘lewis‘, age: 26 }; render(<Profile {...props} />, document.getElementById(‘app‘));
state状态:
state是组件内部的属性。组件本身是一个状态机,它可以在constructor中通过this.state直接定义它的值,然后根据这此值来渲染不同的UI。当state的值发生改变时,可以通过this.setState方法让组件再次调用render方法来渲染新的UI。
//Profile.jsx export default class Profile extends React.Component { constructor (props) { super (props); this.state = { liked: 0 }; this.likedCallback = this.likedCallback.bind(this); } likedCallback() { let liked = this.state.liked; liked++; this.setState({ liked }); } render() { return ( <div> <h1>我的名字叫{this.props.name}</h1> <h2>我今年{this.props.age}</h2> <button onClick={this.likedCallback}>点赞</button> <h2>总点赞数:{this.state.liked}</h2> </div> ) } }
和上面描述的一样,在constructor中添加this.state的定义,每次单击按钮以后调用回调函数,给当前liked值加1,然后更新this.setState完成UI的重新渲染。因为在ES6 class 类型的component组件声明方式中,不会把一些自定义的callback函数绑定到实例上,所以需要手动在constructor里面绑定。
this.likedCallback = this.likedCallback.bind(this);
原文地址:https://www.cnblogs.com/xiaojuziya/p/11094477.html
时间: 2024-08-07 14:36:32