React 项目中使用CSS样式 以及 React.Fragment

jsx 中给元素CSS样式。

首先，介绍一种优先级最高的行内样式。如下。

<button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>

style 最外层括号表示是js 表达式，内层括号表示是一个对象。

 

然后呢，是class 形式的样式。

我们在src 下新建一个style.css 文件，内容如下。

.red-btn {
  background: red;
  color: #fff;
}

然后在，入口文件index.js 中引入。如下。

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

import './style.css'

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

然后再使用这个class，如下。

  getTodoItems() {
    return (
      this.state.list.map((item, index) => {
        return (
          <TodoItem className='red-btn' deleteItem={this.handleDelete} key={index} content={item} index={index} />
        )
      })
    )
  }

 

然后呢，当我们不想最外层包裹div 时，可以使用React.Fragment ，如下。

  render() {
    return (
      <React.Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange}/>
          <button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>
      </React.Fragment>
    );
  }