React ES6 组件

不得不说，开源中国这博客的 Typography 做的不太行，几次想要使用 markdown语法写点东西的时候，想到那层次不清的排版，还是放弃了。既然这样，还是继续使用富文本吧。

React

基本组件 + render 函数

import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className='container'>
          <Nav />
          <Switch>
            <Route exact path='/' component={Home} />
            <Route exact path='/battle' component={Battle} />
          </Switch>
        </div>
      </Router>
    )
  }
}

状态初始化 state

class App extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {
      number: 0,};
  };

  render() {
    // more code here
  }
}

state 的 prop 验证

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

// prop verify
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

挂载函数 componentDidMount

class App extends React.Component {  
  constructor() {
    this.state = { data: [] }
  }
  loadFromServer() {
    $.ajax({
      url: this.props.url,dataType: 'json',success: (data) => {
        this.setState({data: data})
      },error: (xhr,status,err) => {
        console.error(this.props.url,err.toString())
      }
    })
  }
  componentDidMount() {  
    this.loadFromServer();
    setInterval(this.loadFromServer.bind(this),this.props.pollInterval)
  }
  render() {
    return <div className="text">
    <h1>Comments
    <List data={this.state.data} />
    </div>
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!