react 基本输出方法

1.react手脚架   create-react-app

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

2.react操作，输出

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
      super(props);
      this.state={
        token:'123456',
        loading:false,
        arr:['小明','小红','小花']
      }
  }
  // 改变state状态
  click(){
    let arrA=this.state.arr
    arrA.push('小蓝')
    this.setState({
      token:'98888',
      arr:arrA,
      loading:!this.state.loading
    })
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          {
            //判断输出
            this.state.loading==true?<h2>{this.props.title}</h2>:<h2>{this.state.token}</h2>
          }
          {
            //遍历
            this.state.arr.map((val,index) => <li key={index}>{val}</li>)
          }
          <img src={logo} className="App-logo" alt="logo" />
        </div>
        <div onClick={this.click.bind(this)}>点击改变state</div>
      </div>
    );
  }
}

export default App;

　　

转载于:https://www.cnblogs.com/fm060/p/8037054.html