我创建了一个简单的组件,将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.
如何将上述组件呈现在另一个组件中?我在做什么错?