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

【问题标题】：React: No `render` method found on the returned component instance: you may have forgotten to define `render`React：在返回的组件实例上找不到`render`方法：您可能忘记定义`render`
【发布时间】：2023-04-05 16:19:01
【问题描述】：

我从代码中得到了上述错误：

<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}
            />
        )
    }
}

如您所见，我正在尝试使用具有 component 属性的 React 的 Component 指定应该从 EditableContainer 加载到实际组件本身的组件。但是，我得到了错误。

我做错了什么？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我可能会将您的props 更改为这个（注意Component 中的大写C）：

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

您需要像这样从this.props 中的EditableContainer 中解构Component：

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

【讨论】：