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