Javascript 如何使用React.js中的HOC和Redux重构此组件？

我试图在组件

handleUS

和

handleJP

中实现HOC结构

下面是组件

HandleUS

import styles from "../index.css";
import { connect } from "react-redux";
import { countryNews } from "../../actions/index";
import { Link } from "react-router-dom";
import history from "../../history";

class HandleUS extends React.Component {

  state = { countryCode: "us" };

  componentDidMount() {
    this.props.countryNews(this.state.countryCode);
  }

  HandleContent = () => {
    if (!this.props.news) {
      return (
        <div className="ui segment">
          <div className="ui active dimmer">
            <div className="ui active inverted dimmer">Loading...</div>
          </div>
        </div>
      );
    }

    if (!this.props.isSignedIn) {
      history.push("/");
    }

    return this.props.news.articles.map((nw, index) => (
      <div className="newsTitleList" key={nw.title}>
        <h2 className="ui header">
          <span className="newsListOrder">
            {`${index + 1}.`} <span> </span>
          </span>

          <Link
            to={{
              pathname: `/news/${nw.title}`,
              state: { countryCode: this.state.countryCode }
            }}
            className="header newsList"
          >
            {nw.title}
          </Link>
        </h2>
      </div>
    ));
  };

  render() {
    return (
      <div>
        <h1 className="sectionTitle">US Top 20 Headlines</h1>
        {this.HandleContent()}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    news: state.news.newsList,
    isSignedIn: state.auth.isSignedIn
  };
};

export default connect(
  mapStateToProps,
  { countryNews }
)(HandleUS);

从“./index.css”导入样式；
从“react redux”导入{connect}；
从“../../actions/index”导入{countryNews}；
从“react router dom”导入{Link}；
从“../../history”导入历史记录；
类HandleUS扩展了React.Component{
国家={countryCode:“美国”}；
componentDidMount（）{
this.props.countryNews（this.state.countryCode）；
}
HandleContent=（）=>{
如果（！this.props.news）{
返回(
加载。。。
);
}
如果（！this.props.isSignedIn）{
历史。推送（“/”）；
}
返回此.props.news.articles.map（（nw，索引）=>(
{`${index+1}.`}
{nw.title}
));
};
render（）{
返回(
美国20大头条新闻
{this.HandleContent（）}
);
}
}
常量mapStateToProps=状态=>{
返回{
新闻：state.news.newsList，
isSignedIn:state.auth.isSignedIn
};
};
导出默认连接(
MapStateTops，
{countryNews}
)（HandleUS）；

HandleJP

import React from "react";
import styles from "../index.css";
import { connect } from "react-redux";
import { countryNews } from "../../actions/index";
import { Link } from "react-router-dom";
import history from "../../history";

class HandleJP extends React.Component {

  state = { countryCode: "jp" };

  componentDidMount() {
    this.props.countryNews(this.state.countryCode);
  }

  HandleContent = () => {
    if (!this.props.news) {
      return (
        <div className="ui segment">
          <div className="ui active dimmer">
            <div className="ui active inverted dimmer">Loading...</div>
          </div>
        </div>
      );
    }
    if (!this.props.isSignedIn) {
      history.push("/");
    }
    return this.props.news.articles.map((nw, index) => (
      <div className="newsTitleList" key={nw.title}>
        <h2 className="ui header">
          <span className="newsListOrder">
            {`${index + 1}.`} <span> </span>
          </span>
          <Link
            to={{
              pathname: `/news/${nw.title}`,
              state: { countryCode: this.state.countryCode }
            }}
            className="header newsList"
          >
            {nw.title}
          </Link>
        </h2>
      </div>
    ));
  };

  render() {
    return (
      <div>
        <h1 className="sectionTitle">Japan Top 20 Headlines</h1>
        {this.HandleContent()}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    isSignedIn: state.auth.isSignedIn,
    news: state.news.newsList
  };
};

export default connect(
  mapStateToProps,
  { countryNews }
)(HandleJP);

从“React”导入React；
从“./index.css”导入样式；
从“react redux”导入{connect}；
从“../../actions/index”导入{countryNews}；
从“react router dom”导入{Link}；
从“../../history”导入历史记录；
类HandleJP扩展了React.Component{
state={countryCode:“jp”}；
componentDidMount（）{
this.props.countryNews（this.state.countryCode）；
}
HandleContent=（）=>{
如果（！this.props.news）{
返回(
加载。。。
);
}
如果（！this.props.isSignedIn）{
历史。推送（“/”）；
}
返回此.props.news.articles.map（（nw，索引）=>(
{`${index+1}.`}
{nw.title}
));
};
render（）{
返回(
日本20大头条新闻
{this.HandleContent（）}
);
}
}
常量mapStateToProps=状态=>{
返回{
isSignedIn:state.auth.isSignedIn，
新闻：state.news.newsList
};
};
导出默认连接(
MapStateTops，
{countryNews}
)（HandleJP）；

这两个组件都获得action creator

this.props.countryNews

，并将其中每个组件的

this.state.countryCode

传递给获取新闻api

如您所见，两个组件的结构几乎相同

但是，如何使用Redux制作HOC组件