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，渲染的时候，不会产生复用

• 

   

更多专业前端知识，请上【猿2048】www.mk2048.com