React 从零开始学习（三）—— 数据渲染

项目跑起来了，接下来实现最基本的功能：数据渲染。

渲染 state 中的数据

在 Components 文件夹里新建 Home.js 文件，定义要展示的文字以及文字样式：

import React, { Component } from 'react'
class Home extends Component {
  constructor() {
    super()
    this.state = {
      text: 'Hello,world！',
      style: {
        color: 'red'
      }
    }
  }
  render () {
    return (
      <div>
        <p>{this.state.text}</p>
        <p style={this.state.style}>{this.state.text}</p>
      </div>
    )
  }
}
export default Home

然后，在 App.js 中引入组件 Home.js ：

// import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import Home from './components/Home'

function App () {
  return (
    <div className="App">
      <header className="App-header">
        {/* <img src={logo} className="App-logo" alt="logo" /> */}
        <p>
          文字 <code>src/App.js</code> Hello World!.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          https://reactjs.org
        </a>
      </header>
      <Home />
    </div>
  );
}

export default App;

可以看到，数据展示出来了：

向组件传递参数（Props）

然后，跟着官方文档做了一个小 demo，练习了通过 props 传递数据。

在 Components 文件夹里新建 Board.js 、Square.js 、Game.js 文件：

Square.js：

import React, { Component } from 'react'
import '../assets/css/Square.css'
class Square extends Component {
  render () {
    return (
      <button className="square">
        {this.props.value}
      </button>)
  }
}
export default Square

其中，引入了样式文件 Square.css：

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

Board.js：

import React, { Component } from 'react'
import Square from './Square'
class Board extends Component {
  renderSquare (i) {
    return <Square value={i} />;
  }
  render () {
    const status = 'Next player:X';
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    )
  }
}
export default Board

Game.js：

import React, { Component } from 'react'
import '../assets/css/Game.css'
import Board from './Board'
class Game extends Component {
  render () {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status*/}</div>
          <div>{/* ToDo*/}</div>
          <div style={{ "color": 'red' }}>{/* status*/}</div>
        </div>
      </div>
    )
  }
}
export default Game

其中引入了样式文件 Game.css：

.game {
}

.game-info {
  margin-left: 20px;
}

上面就简单实现了通过 Props 来传递数据，展示效果如下：

F12 打开浏览器调试状态，还可以看到组件结构：