条件渲染
import '../css/01.css'
render() {
return (
<div>
<input ref={this.myref}></input>
<button onClick={this.handleClick2}>获取输入框的值</button>
<ul>
{this.state.list.map(item => <li key={item.id}>
{item.name}
<button onClick={()=>this.handleDelClick(item.id)}>del</button>
</li>)}
</ul>
{/* 方法一 */}
{this.state.list.length===0 ? <div>暂无代办事项</div>:null}
{/* 方法二 && 意思是前面条件为真执行后面的*/}
{this.state.list.length===0 && <div>暂无代办事项</div>}
{/* 方法三 通过样式隐藏 */ }
<div className={this.state.list.length===0 && 'hidden'}>暂无代办事项</div>
</div>
)
}
01.css
.hidden{
display: none;
}