React 專案中使用CSS樣式 以及 React.Fragment
阿新 • • 發佈:2019-01-07
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> ); }