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=" " >]}
 7                   msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
 8                 <div className={style.inline}>元,免运费,否则按照公里数收取,每公里</div>
 9                 <Input className={style.input} label=" " >]}
10                   msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
11                 <div className={style.inline}>元,最多不超过</div>
12                 <Input className={style.input} label=" " >]}
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=" " >]}
21                    msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
22                  <div className={style.inline}>元,免运费,否则一口价</div>
23                  <Input className={style.input} label=" " >]}
24                    msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
25                  <div className={style.inline}>元</div>
26                </div>)
27 
28             }
29           </div>
  •   如上面代码显示,如果通过一个数值控制,显示和隐藏切换的话,必须加入一个key值,否则在切换的时候活报错,应该是在页面渲染的时候会重复利用这个元素,如果加入keys,渲染的时候,不会产生复用
    
    
  • React切换显示和隐藏

     

相关文章: