React HOC狀態出錯

Question

我在https://gist.github.com/jesperorb/ad6de7532ade111ae2a7feecc1116339的基礎上寫了試劑鼻子

App.js

import React, { Component } from "react";
import {withToggle} from './withToggle'

export default class App extends Component {
  render() {
    const ButtonWithToggle = withToggle(<button onClick={()=>{}}>butt</button>);
    return (
      <div className="App">
        <button onClick={()=>{}}>butt</button>
        <ButtonWithToggle />
      </div>
    );
  }
}

withToggle.js：

import React, { Component } from "react";
import PropTypes from 'prop-types';

export const withToggle = (ComposedComponent) =>
    class extends Component {

        static propTypes = {
            children: PropTypes.string
        }

        state = {
            toggle: false
        }
        onClick = () => {
            this.setState({ toggle: !this.state.toggle });
        }

        render() {
            return (
                <ComposedComponent {...this.props} onClick={this.onClick}>xxx {this.props.children}</ComposedComponent>
            )
        }
    }

結果，我在控制台中收到一個錯誤：React.createElement：type無效 - 期望一個字符串（對於內置組件）或一個類/函數（對於復合組件）但得到：object。 在withToggle.js：20檢查您的代碼。 （其中<ComposedComponent ）

可能是什么原因？

Answer 1

HOC應該應用於Component而不是渲染組件。
在你的情況下withToggle應用於<button onClick={()=>{}}>butt</button> ，這是一個按鈕而不是按鈕組件的渲染。
另外，你沒有使用children的權利，你要替換onClick從提供withToggle用onClick={()=>{}}

試試這個：

App.js

import React, { Component } from "react";
import {withToggle} from './withToggle'

const Button = ({onClick, children}) => <button onClick={onClick}>{children}</button>;

export default class App extends Component {
  render() {
    const ButtonWithToggle = withToggle(Button);

    return (
      <div className="App">
        <button onClick={()=>{}}>butt</button>
        <ButtonWithToggle />
      </div>
    );
  }
}

withToggle.js

import React, { Component } from "react";
import PropTypes from 'prop-types';

export const withToggle = (ComposedComponent) =>
    class extends Component {

        static propTypes = {
            children: PropTypes.string
        }

        state = {
            toggle: false
        }

        onClick = () => {
            this.setState(state => ({ toggle: !state.toggle }));
        }

        render() {
            return (
                <ComposedComponent {...this.props} onClick={this.onClick}>{this.props.children}</ComposedComponent>
            )
        }
    }

Answer 2

我改變withToggle.js：

import React, { Component } from "react";
import PropTypes from 'prop-types';

export const withToggle = (ComposedComponent) =>
class extends Component {

    static propTypes = {
        children: PropTypes.string.isRequired,
        onClick: PropTypes.func
    }

    static defaultProps = {
        onClick: () => { }
    }

    state = {
        toggle: false
    }
    onClick = () => {
        this.setState({ toggle: !this.state.toggle }, () => console.log('toggle=', this.state.toggle));
        this.props.onClick()
    }

    render() {
        console.log('this.props', this.props)
        return (
            <ComposedComponent {...this.props} onClick={this.onClick}>{this.state.toggle ? 'xxx' : ''}{' '}{this.props.children}</ComposedComponent>
        )
    }
}

但onClick沒有重新定義，按鈕內的文字也沒有改變（（