下面的代码要实现点击 按钮 就出现 show 的内容
结果要点第二次才会出现
然后 console.log
标记1 ：true
标记2 ：false
<Show/>组件里面有css animation 入场动画
极客观点
项目管理
HarmonyOS
handleClick = () => {
this.setState({
show: true
}, () => console.log('标记1', this.state.show));
console.log('标记2', this.state.show);
}
render() {
return (
<div>
<button onClick={this.handleClick}>出现</button>
{
this.state.show &&
<div>
<Show/>
</div>
}
</div>
)
}刚学react不久，请问是什么原因呢
无法重现你说的问题。但是，你的 render 函数是有问题的，没有 return ，而且是多个节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React</title>
<script crossorigin src="https://s.zys.me/js/react/react.js"></script>
<script crossorigin src="https://s.zys.me/js/react/react-dom.js"></script>
<script crossorigin src="https://s.zys.me/js/react/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class A extends React.Component {
constructor(props){
super(props);
this.state = {show: false};
}
handleClick = () => {
this.setState({ show: true });
}
render() {
return (
<div>
<button onClick={this.handleClick}>出现</button>
{ this.state.show && <div> show </div> }
</div>
)
}
}
ReactDOM.render(<A />, document.getElementById('app'));
</script>
</body>
</html>
如果你要立即执行就得，通过ref操控dom
handleClick = () => {
console.log(this.box);
this.box.style.display = 'block';
}
render() {
return (
<div>
<button onClick={this.handleClick}>出现</button>
<div style={{display:'none'}} ref={(node) => this.box = node}>
<Show/>
</div>
</div>
)
}10 回答11.2k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.8k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
setState是异步的，如果你要在设置之后操作state，就在第二个参数回调函数内操作
你目前放的代码没问题