阮一峰老师的github地址:React Demos
// ReactDOM.render() 将模板转化为 HTML 语言 // 参数一:被渲染的标签 // 参数二:被插入的父元素 ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
import React, { Component } from "react" export default class User extends Component { render() { const arr = [1, 2, 3, 4] return ( <div> {arr.map(item => ( <span style={{color: 'red'}}> {item}</span> ))} </div> ) } }
{}
中可以键入javascript
代码,可以用来遍历数组,对象等;
在其中可以使用return
来返回标签。
数组直接写在{}
中就能遍历
import React, { Component } from "react" export default class User extends Component { render() { const arr = [<h1 key="1">Hello world!</h1>, <h2 key="2">React is awesome</h2>] return ( <div> {arr.map(item => ( <p style={{ color: "red" }}> {item}</p> ))} </div> ) } }
组件类只能包含一个顶层标签
组件类必须以 / 结尾
组件类都必须有自己的 render 方法,用于输出组件
import React, { Component } from "react" class NotesList extends React.Component { render() { return ( <ol> {React.Children.map(this.props.children, child => <li style={{backgroundColor: 'yellow'}}>{child}</li>)} </ol> ) } } export default class User extends Component { render() { return ( <div> <NotesList> <h1 key="1">Hello world!</h1> <h2 key="2">React 2019-12-02</h2> </NotesList> </div> ) } }
指定组件中的属性类型
import React, { Component } from "react" import PropTypes from "prop-types" class NotesList extends React.Component { static propTypes = { title: PropTypes.string.isRequired } render() { return ( <ol> <li style={{ color: "red" }}>{this.props.title}</li> {React.Children.map(this.props.children, child => ( <li style={{ backgroundColor: "yellow" }}>{child}</li> ))} </ol> ) } } export default class User extends Component { render() { const title = "这是父组件给子组件传递的值" return ( <div> <NotesList title={title}> <h1 key="1">Hello world!</h1> <h2 key="2">React 2019-12-02</h2> </NotesList> </div> ) } }
import React, { Component } from "react" export default class User extends Component { constructor(props) { super(props) // 将dom元素赋值在 this 上 this.myTextInput = React.createRef() // 将 handleClick 事件绑定到 this 上,并重新命名 this.click = this.handleClick.bind(this) } handleClick() { // 输入框赋值 this.myTextInput.current.value = '123' // 输入框触发得焦事件 this.myTextInput.current.focus() } render() { return ( <div> {/* 通过ref属性获取dom元素,和vue相似 */} <input type="text" ref={this.myTextInput} /> <input type="button" value="点击按钮使输入框得到焦点" onClick={this.click} /> </div> ) } }
8、this.state
import React, { Component } from "react" export default class User extends Component { // 构造器创建 state constructor(props) { super(props) this.state = { liked: true } // p 标签上的 方法 this.handleClick = this.handleClick.bind(this) } handleClick(event) { // state 下的 liked 状态改变 this.setState({ liked: !this.state.liked }) } render() { var text = this.state.liked ? "开心" : "不开心" return <p onClick={this.handleClick}>点击切换心情 --- {text}</p> } }
由于 this.props
和 this.state
都用于描述组件的特性,可能会产生混淆。
一个简单的区分方法是,this.props
表示那些一旦定义,就不再改变的特性,而 this.state
是会随着用户互动而产生变化的特性。
import React, { Component } from "react" export default class User extends Component { constructor(props) { super(props) this.state = { value: "Hello!" } this.handleChange = this.handleChange.bind(this) } handleChange(event) { // 设置 input 的值 this.setState({ value: event.target.value }) } render() { var value = this.state.value return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ) } }