問題描述

我用了antdesign的插件，想實現從后臺獲取一個數據num，然后根據這個num循環n變，輸出單選框<RadioButton value='c'>張三</RadioButton>，但是控制臺直接報錯了ps.這是jsx頁面

[ERROR] parser.babel-5.x: /page/localExaminationPlan2/app/components/appointExpertPostForm.jsx: Unexpected token (125:22) [E:/mavenWorkspace/labsforce/FrontEnd/lcy/myProject/page/localExaminationPlan2/app/components/appointExpertPostForm.jsx]

我該怎么寫？

let formClass = React.createClass({ //注意處理提交表單，準備數據給ok action handleSubmit(e) { //表單校驗 console.log(’-----’); let validateResult = this.props.form.validateFieldsAndScroll((errors, values) => { if (!!errors) {console.log(’Errors in form!!!’);return; }else{let params = ObjectAssign(//將隱藏值一并提交，如父id this.props.appointExpertPostFormReduce.get(’fieldValues’).toJSON(), this.props.form.getFieldsValue());this.props.appointExpertPostFormAction.onOk( params, this.props.notificationAction, Notification, this.postFormCallBack); } }); }, //表單提交成功回調 postFormCallBack(){ this.props.declarationDetailTableComponent.queryRecords(); },queryRecords(params={}){ //2.add order query 由table onFieldsChange 傳入參數 let wheresParma = []; let queryParam = {}; let queryFormParams = {}; queryFormParams.wheres = wheresParma; queryParam.queryFormParams = queryFormParams; let paramsAssign = ObjectAssign(this.props.appointExpertPostFormReduce.get(’pagination’).toJSON(),queryParam,params); paramsAssign.queryFormParams = JSON.stringify(paramsAssign.queryFormParams); this.props.appointExpertPostFormAction.onShowPostForm(paramsAssign,this.props.notificationAction,Notification); }, render() { const {appointExpertPostFormReduce,appointExpertPostFormAction} = this.props; const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 27 }, }; return ( <p style={{display:'inline'}}><Modal visible={this.props.appointExpertPostFormReduce.get(’addModleVisible’)} confirmLoading={this.props.appointExpertPostFormReduce.get(’confirmLoading’)} width={583} maskClosable={false} footer={[ <Button style={{backGround:'#000'}} key='btn' type='ghost' size='large' onClick={this.props.appointExpertPostFormAction.onCancel}> 取 消 </Button>, <Button key='submit' type='primary' size='large' onClick={this.handleSubmit}> 確 定 </Button>, ]}> <Form horizontal> <p id='box'> <FormItem {...formItemLayout} label='選擇專家'> <RadioGroup defaultValue='a' size='large'><RadioButton value='a'>趙六</RadioButton><RadioButton value='b'>李四</RadioButton><RadioButton value='c'>王五</RadioButton><RadioButton value='d'>張三</RadioButton> </RadioGroup> </FormItem> </p></Form></Modal> </p> ); },});var PostForm = Form.create()(formClass);module.exports = PostForm;

問題解答

比較簡單的，在render函數里面定義一個array，然后for里面生成的東西依次push進去，最后顯示

render() { let shows = [] for (let i = 0; i < this.props.appointExpertPostFormReduce.num; i++){shows.push(<RadioButton value={/*具體value*/} key={i}>{/*具體顯示*/}</RadioButton>) }return ( <p style={{display:'inline'}}> //前面省略，貼代碼最好省略無關的內容 <Form horizontal> <p id='box'> <FormItem {...formItemLayout} label='選擇專家'> <RadioGroup defaultValue='a' size='large'><RadioButton value='a'>趙六</RadioButton><RadioButton value='b'>李四</RadioButton><RadioButton value='c'>王五</RadioButton><RadioButton value='d'>張三</RadioButton>{shows} </RadioGroup> </FormItem></p> );

},});

JSX里的{}不能直接用for，而且值要出來不用再加花括號，這代碼有明顯的錯誤。

要像這樣才行，下面用箭頭函數包起來，直接用函數也行:

<p>{()=> { for(var i=1; i<10; i++){ <p>i</p> } }}</p>

不過一般如果到render中的return語句，應該要在這之前先求出值再進去加在花括號中。而不是在里面作運算。

var items = this.props.appointExpertPostFormReduce.map((item, i)=>{ return (<RadioButton></RadioButton>{/***/} ); });