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&nbsp;handleFn={this.onSaveTitle}&nbsp;Component={FieldStyle}>{props.child}</EditableContainer>你需要像这样Component解构：this.propsEditableContainerconst&nbsp;{children,&nbsp;Component,&nbsp;...rest}&nbsp;=&nbsp;this.props