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，渲染的時候，不會產生復用

•