React控制元素显示隐藏的三种方法小结

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {
                    this.state.showElem?(
                        <div>显示的元素</div>
                    ):null
                }
            </div>
        )
    }
}

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:'none'
        }
    }
    render(){
        return (
            <div style={{display:this.state.showElem}}>显示的元素</div>
        )
    }
}

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {/* 写法一 */}
                <div className={this.state.showElem?'word-style':'word-style hide'}>显示的元素</div>
                {/* 写法二 */}
                <div className={`${this.state.showElem?'':'hide'} word-style`}>显示的元素</div>
            </div>
        )
    }
}

{radioChange >= 0 &&
          <div>
            {radioChange === 0 ? (
              <div className={style.template} key="1">
                <div className={style.inline}>如果金额超过</div>
                <Input className={style.input} label=" " id="free_price" rules={['required']}
                  msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                <div className={style.inline}>元，免运费，否则按照公里数收取，每公里</div>
                <Input className={style.input} label=" " id="unit_price" rules={['required']}
                  msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                <div className={style.inline}>元，最多不超过</div>
                <Input className={style.input} label=" " id="max_price" rules={['required']}
                  msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                <div className={style.inline}>元</div>
              </div>
            )
             : (
               <div className={style.template} key="2">
                 <div className={style.inline}>如果金额超过</div>
                 <Input className={style.input} label=" " id="free_price" rules={['required']}
                   msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                 <div className={style.inline}>元，免运费，否则一口价</div>
                 <Input className={style.input} label=" " id="price" rules={['required']}
                   msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
                 <div className={style.inline}>元</div>
               </div>)

            }
          </div>