React：在返回的组件实例上找不到“render”方法：您可能忘记定义“render”

Question

我从代码中收到上述错误：<EditableContainer handleFn={this.onSaveTitle} component={FieldStyle}>{props.child}</EditableContainer>class EditableContainer extends React.Component<any, any> {    render () {        const {children, ...rest} = this.props        const {edit} = this.state        if (edit) {            return (                <Component                    autoFocus                    onBlur={this.handleBlur.bind(this)}                    value={this.state.children}                    onChange={this.handleOnChange}                    render={(props) => this.props.component.render(props)}                />            )        } }class FieldStyle extends React.Component<any, any> {     render () {        const {autoFocus, ...rest} = this.props        // auto focus        const ref = autoFocus ? (ref) => { this.ref = ref } : null        return (            <TextField                ref={ref}                type="text"                {...rest}            />        )    }}正如你所看到的，我试图使用带有propEditableContainer的 React 来指定应该从哪个组件加载到实际组件本身。但是，我收到错误。Componentcomponent我究竟做错了什么？

Answer 1

我可能会把你的改成这个（注意中的props大写）：CComponent

<EditableContainer handleFn={this.onSaveTitle} Component={FieldStyle}>{props.child}</EditableContainer>

你需要像这样Component解构：this.propsEditableContainer

const {children, Component, ...rest} = this.props