代码之家  ›  专栏  ›  技术社区  ›  Suhail Gupta

无法在另一个组件中呈现antd的窗体组件

  •  0
  • Suhail Gupta  · 技术社区  · 6 年前

    我创建了一个简单的组件来封装antd的 form 在antd家里 modal . 我想在另一个组件中呈现以下组件。

     class MOCForm extends Component<FormComponentProps & mprops, mocFormState> {
    
        constructor(props) {
            super(props);
    
            this.state = {
            showMOCModal: false,
            confirmMOCLoading: false
            };
        }
    
        async saveNewMOC() {
            this.setState({
            confirmMOCLoading: true
            });
    
            this.props.form.validateFieldsAndScroll(async (err, values) => {
                if (!err) {
                    await addMOC({
                    name: values.new_moc
                    });
    
                    /**
                    * After the data is saved, stop the loader
                    */
                    this.setState({
                        confirmMOCLoading: false,
                        showMOCModal: false
                    });
                }
            });
        }
    
        closeMOCModal() {
            this.setState({
            showMOCModal: false
            });
        }
    
        render() {
            return (
            <Modal
                title="Create a New MOC"
                visible={this.state.showMOCModal}
                onOk={this.saveNewMOC}
                confirmLoading={this.state.confirmMOCLoading}
                onCancel={this.closeMOCModal}
            >
                <Form onSubmit={this.saveNewMOC}>
                <FormItem label="Name">
                    {this.props.form.getFieldDecorator("new_moc", {
                    rules: [
                        {
                        required: true,
                        message: "Please fill the name of this MOC to add"
                        }
                    ]
                    })(<Input />)}
                </FormItem>
                </Form>
            </Modal>
            );
        }
    }
    

        const modalForm = Form.create({})(MOCForm);
    
        .
        .
        render() {
           <modalForm />
        }
    

    但我有个错误 Property 'modal' does not exist on type 'JSX.IntrinsicElements'.ts(2339) 我还尝试了以下方法:

    {modalForm}
    

    但是我得到了一个不同的错误: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

    如何在另一个组件中呈现上述组件?我做错了什么?

    0 回复  |  直到 6 年前