如何使React HOC - 高阶组件协同工作？ [英] How to make React HOC - High Order Components work together?

问题描述

我有一个像这样的小型演示组件：

I have a small presentation component like this:

function MyList({data, uppercaseMe, lowercaseMe}) {
    return <ul>
        {data.map(item =>
            <li>{item} -
                <button onClick={() => uppercaseMe(item)}>Uppercase me!</button>
                <button onClick={() => lowercaseMe(item)}>Lowercase me!</button>
            </li>)}
    </ul>;
}

然后我想用三个HOC来装饰MyList：

And then I have three HOCs I would like to use to decorate MyList:

const WithData = (Component) => {
return class extends React.Component {

    constructor(props) {
        super(props);
        this.state= {data:['one', 'two', 'three', 'four', 'five']};
    };

    render() {
        return <Component {...this.props} data={this.state.data} />;
    }
}
};

const WithUppercase = (Component) => {
return class extends React.Component {

    uppercaseMe = (item) => {
        // how to access WithData state from here?
        console.log(item.toUpperCase());
    };

    constructor(props) {
        super(props);
    };

    render() {
        return <Component {...this.props} uppercaseMe={this.uppercaseMe}/>;
    }
 }
};

const WithLowercase = (Component) => {
return class extends React.Component {

    lowercaseMe = (item) => {
        // how to access WithData state from here?
        console.log(item.toLowerCase());
    };

    constructor(props) {
        super(props);
    };

    render() {
        return <Component {...this.props} lowercaseMe={this.lowercaseMe}/>;
    }
 }
};

喜欢这样：

const ComposedList = WithLowercase(WithUppercase(WithData(MyList)));

不幸的是，我不知道如何在WithLowercase或WithUppercase中更改WithData的状态。

Unfortunately, I don't know how to change the state of WithData from within WithLowercase or WithUppercase.

如何将一个HOC的状态暴露给链中的另一个HOCS？

How do you expose the state of one HOC to the other HOCS in the chain?

推荐答案

您不希望直接公开状态。你想要做的是将一个函数作为prop传递给包装组件，这将允许你更新状态。

You don't want to expose the state directly. What you do want to do is pass down a function as a prop to the wrapped component that will allow you to update state.

所以如果我们拿走HOC并添加一个一小段代码，创建一个更新其状态的函数，现在可以传递给它的子组件：

So if we take the HOC and add a little bit of code, creating a function to update its state that can now be passed down to its child components:

const WithData = (Component) => {
  return class extends React.Component {

      constructor(props) {
          super(props);
          this.state= {data:['one', 'two', 'three', 'four', 'five']};
      }

      update (data) {
        this.setState({ data });
      }

      render() {
          return <Component onUpdate={this.update} {...this.props} data={this.state.data} />;
      }
  }
};

现在，我们可以在其中一个子组件中使用它：

Now within one of the child components we can consume it:

const WithUppercase = (Component) => {
    return class extends React.Component {

        uppercaseMe = (item) => {
            const itemIndex = this.props.data.indexOf(item);
            const newData = this.props.data.slice();
            newData[itemIndex] = item.toUpperCase();
            this.props.onUpdate(newData); // update WithData state here
        };

        constructor(props) {
            super(props);
        };

        render() {
            // onUpdate function is once again passed to child components
            // implicitly through props if you need to call it again
            return <Component {...this.props} uppercaseMe={this.uppercaseMe}/>;
        }
    }
};

这篇关于如何使React HOC - 高阶组件协同工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！