条件渲染

书接上回  https://www.cnblogs.com/kaibindirver/p/17381857.html

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;

}