通过一个TodoList功能页面,来学习React的基本语法.大致内容如下

• JSX语法
• 节点的样式

这里就不单独介绍脚手架的搭建了,先简单看一下初始化后的脚手架目录结构

image.png

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

/src/App.js

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  render () {
    return (
      <div>这里是todolist</div>
    );
  }
}

export default App;

这里就简单的实现了一个入口页面.

JSX概念

JSX是React中会使用非常常见的一种语法格式,在JSX中可以使用js语法.

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project: {
        name: 'TodoList',
        type: true,
        lastName: 'online page'
      }
    }
  }
  render () {
    return (
      <div>这里是{this.state.project.name} {this.state.project.type ? this.state.project.lastName : ''}</div>
    );
  }
}

export default App;

页面展示:

image.png

DOM节点的样式添加

在React中对于DOM节点样式添加是非常灵活的

类添加样式

在React中添加类,不能直接使用class,因为class是作为js的关键词,直接出现在JSX会出现警告提示,所以React要求我们使用className代替class
/src/App.js

import React, { Component } from 'react';
import './index.css'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project: {
        name: 'TodoList'
      }
    }
  }
  render () {
    return (
      <div className="index_pagebox">
        <div className="title_box">{this.state.project.name}</div>
      </div>
    );
  }
}

export default App;

/src/index.css

.title_box{
  font-size: 28px;
  text-align: center;
  line-height:35px;
}

直接写行内样式

在React中写行内样式,不能像HTML标签那样直接用style等号css样式,直接写的话,会报一个警告,并且项目页面无法正常渲染

Line 14:  Style prop value must be an object  react/style-prop-object

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

在React框架的JSX编码格式要求，style必须是一个对象,所以我们要写成这样

 return (
      <div style={{ padding: '100px' }}>
        <div className="title_box">{this.state.project.name}</div>
      </div >
    );

这里对于双括号的解释: 由于对象是js的语法,而React需要解析js语法需要使用大括号包起来,所以双括号可以理解为,被大括号包着的js对象

动态设置Style

通过state下的变量来控制样式,同理也可以控制class

import React, { Component } from 'react';
import './index.css'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project: {
        name: 'TodoList'
      },
      style: {
        show: true
      }
    }
  }
  render () {
    return (
      <div style={{ padding: this.state.style.show ? '100px' : '200px' }}>
        <div className="title_box">{this.state.project.name}</div>
      </div >
    );
  }
}

export default App;

通过state中的project对象下的style.show来控制样式

动态控制样式的值

render () {
    return (
      <div style={{ padding: this.state.style.paddingValue }}>
        <div className="title_box">{this.state.project.name}</div>
      </div >
    );
  }

这样我们就可以通过控制变量的值来改变盒子的padding的值了

ES6拼接写法

经常在便利一个数组的时候,需要拼接样式后面接一个index变量,

<div className={`listbox ${index}`}>
    demo
</div>