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

如您所见，我正在尝试使用具有道具的 React指定应将哪个组件加载EditableContainer到实际组件本身。但是，我得到了错误。Componentcomponent

我究竟做错了什么？

标签： javascriptreactjs

Answer 1

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

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

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

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