在React JS*享重复响应组件的共同状态
我对组件状态有一个疑问。我有一个瓷砖组件。在点击拼贴组件时,我正在切换拼贴组件的细节。在React JS*享重复响应组件的共同状态
/* ---- Tile component ---- */
import React, { Component } from 'react';
import TileDetail from './TileDetail';
class Tile extends Component {
constructor(props) {
super(props);
this.state = {
isTileDetailOpened:false
};
this.showTileDetails=this.showTileDetails.bind(this);
}
showTileDetails(networkName){
this.setState({isTileDetailOpened:!this.state.isTileDetailOpened});
alert(networkName);
}
render() {
const isTileDetailOpened = this.state.isTileDetailOpened;
return (
<li className={ !this.state.isTileDetailOpened ? "tile-item" : "tile-item-with-detail" }>
<div onClick={(e) => this.showTileDetails(this.props.objTile.network_name)}>
{this.props.objTile.network_name}
</div>
{this.state.isTileDetailOpened ? <TileDetail /> : <div/>}
</li>
);
}
}
export default Tile;
/* ---- Tile Detail component ---- */
import React, { Component } from 'react';
class TileDetail extends Component {
render() {
return (
<div className="tile-detail">
<p>TileDetails</p>
</div>
);
}
}
export default TileDetail;
正如您所看到的,我正在切换瓦片细节点击瓦片点击和它的工作正常。 我正在渲染我的页面上收集的瓷砖。如果我点击各个瓷砖,它工作正常。但是,如果我看到一个瓦片的细节,我想要的其他瓦片细节应始终隐藏。 您能否就此指导我。 React JS上的新功能
您必须使用Tile
的父组件来实现此目的。在父组件中有一个状态,如currentlyTileDetailOpened
。在showTileDetails
通过道具调用方法将此状态的值(currentTileDetailOpened)设置为当前Tile
的id
。将此状态传递给Tile
组件作为道具。在Tile
render
方法,检查道具,而不是状态,并使其像
{this.props.currentlyOpenedTile === tile.id ? <TileDetail /> : null}
感谢哥们!像魅力一样工作。只是想知道它是否是一个好方法。 ?? Redux是我们可以在这里使用的东西? –
我刚刚与我通过存储在终极版的页面信息,然后制作在一个特殊的选项做了分页控制单元这样做第二个分页符,以便它只使用Redux data
而不是“双重执行”相同的工作(因此也不会与第一个分页程序不同步)。
是这样的(你可以做同样的设置父的状态(即:第一个共同的祖先):
<Pagination
pageSize={25}
items={(!this.state.fuzzyMatches.length)
? this.props.businesses
: this.state.fuzzyMatches}
onChangePage={(pagerState) => this.handlePageChange(pagerState)}
activePage={this.props.activePage}
isEmpty={((this.state.search.length > 0) &&
(this.state.fuzzyMatches.length === 0))}
bottom // bottom = true
bottomData={this.props.pagination} // get data from here
/>
现在,分页程序里面,而不是正常的逻辑,它这样做:
render() {
const pager = (this.props.bottom)
? this.props.bottomData
: this.state.pager
的bottom = true
道具其实只是为了处理轻微的CSS差异,但你可以看到,第一个分页程序创建的细节,而第二个简单地使用那些不是重复的。我已经告诉第二组分跳过所有的内部工作和公正使用传入的数据。
您需要将'isTileDetailOpened'存储在'TileDetail'组件中。试着这样做。它会工作。如果你无法弄清楚,请告诉我 – iamsaksham