无法使用React呈现html div？
无法使用React呈现html div？
提问于 2018-12-11 04:09:24
我正在尝试基于一个数组生成几个divs --但是我无法做到。我单击了一个按钮，该按钮应该通过映射返回divs，但它返回的是任何内容。
class History extends Component {
constructor(props) {
super(props);
this.state = {
info: ""
};
this.generateDivs = this.generateDivs.bind(this);
}
async getCurrentHistory(address) {
const info = await axios.get(`https://api3.tzscan.io/v2/bakings_history/${address}?number=10000`);
return info.data[2];
}
async getHistory() {
const info = await getCurrentHistory(
"tz1hAYfexyzPGG6RhZZMpDvAHifubsbb6kgn"
);
this.setState({ info });
}
generateDivs() {
const arr = this.state.info;
const listItems = arr.map((cycles) =>
<div class="box-1">
Cycle: {cycles.cycle}
Count: {cycles.count.count_all}
Rewards: {cycles.reward}
</div>
);
return (
<div class="flex-container">
{ listItems }
</div>
)
}
componentWillMount() {
this.getHistory();
}
render() {
return (
<div>
<button onClick={this.generateDivs}>make divs</button>
</div>
);
}回答 1
Stack Overflow用户
发布于 2018-12-11 04:16:29
您实际上并不是仅仅通过调用generateDivs函数来呈现div，它返回的JSX并没有在任何地方使用。
为了让它工作，你可以这样做-
render() {
return (
<div>
<button onClick={this.showDivs}>make divs</button>
{this.state.isDisplayed && this.generateDivs()}
</div>
);
}其中，showDivs是将状态属性isDisplayed切换为true的函数
要点是现在将在render函数中呈现在generateDivs函数中返回的JSX。有许多方法可以切换显示，这只是一种直接的方法
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53712901
复制相关文章
相似问题