React切换显示和隐藏

1 {radioChange >= 0 &&
 2           <div>
 3             {radioChange === 0 ? (
 4               <div className={style.template} key="1">
 5                 <div className={style.inline}>如果金额超过</div>
 6                 <Input className={style.input} label=" " id="free_price" rules={['required']}
 7                   msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
 8                 <div className={style.inline}>元,免运费,否则按照公里数收取,每公里</div>
 9                 <Input className={style.input} label=" " id="unit_price" rules={['required']}
10                   msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
11                 <div className={style.inline}>元,最多不超过</div>
12                 <Input className={style.input} label=" " id="max_price" rules={['required']}
13                   msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
14                 <div className={style.inline}>元</div>
15               </div>
16             )
17              : (
18                <div className={style.template} key="2">
19                  <div className={style.inline}>如果金额超过</div>
20                  <Input className={style.input} label=" " id="free_price" rules={['required']}
21                    msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
22                  <div className={style.inline}>元,免运费,否则一口价</div>
23                  <Input className={style.input} label=" " id="price" rules={['required']}
24                    msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
25                  <div className={style.inline}>元</div>
26                </div>)
27 
28             }
29           </div>
  •   如上面代码显示,如果通过一个数值控制,显示和隐藏切换的话,必须加入一个key值,否则在切换的时候活报错,应该是在页面渲染的时候会重复利用这个元素,如果加入keys,渲染的时候,不会产生复用
    
    
  •  

posted @ 2018-08-07 14:50  dfgfgf  阅读(6878)  评论(0编辑  收藏  举报