資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React.js 中提升狀態
經常會需要在不同元件之間共享狀態。在兩個元件之間共享狀態的常用方法是將狀態移到兩個元件的公共父元件。這種方法在 React.js 中被稱為提升狀態。
使用共享狀態，狀態改變後將在相關元件中同時反映。這是共享狀態元件的單一事實來源。
示例
我們有一個 App 元件，其中包含 PlayerContent 和 PlayerDetails 元件。PlayerContent 顯示播放器名稱按鈕。PlayerDetails 在一行中顯示播放器詳細資訊。
app 元件包含這兩個元件的狀態。一旦我們單擊其中一個播放器按鈕，選定的播放器即會顯示。
App.js
import React from 'react';
import PlayerContent from './PlayerContent';
import PlayerDetails from './PlayerDetails';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { selectedPlayer:[0,0], playerName: ''};
this.updateSelectedPlayer = this.updateSelectedPlayer.bind(this);
}
updateSelectedPlayer(id, name) {
var arr = [0, 0, 0, 0];
arr[id] = 1;
this.setState({
playerName: name,
selectedPlayer: arr
});
}
render () {
return (
<div>
<PlayerContent active={this.state.selectedPlayer[0]}
clickHandler={this.updateSelectedPlayer} id={0} name="David"/>
<PlayerContent active={this.state.selectedPlayer[1]}
clickHandler={this.updateSelectedPlayer} id={1} name="Steve"/>
<PlayerDetails name={this.state.playerName}/>
</div>
);
}
}
export default App;PlayerContent.js
import React , { Component} from 'react';
class PlayerContent extends Component {
render () {
return (
<button onClick={() => {this.props.clickHandler(this.props.id, this.props.name)}} style={{color: this.props.active? 'red': 'blue'}}>{this.props.name}
</button>
);
}
}
export default PlayerContent;PlayerDetails.js
import React, { Component } from 'react';
class PlayerDetails extends Component {
render () {
return (
<div>{this.props.name}
</div>
);
}
}
export default PlayerDetails;輸出
輸出顯示如下 −
更新於: 28-Aug-2019
618 次檢視
廣告