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