Javascript 如何在react中处理两个相似的组件

我还没有反应过来。我有两个组件：TimePickerComponent和TimeDurationPickerComponent

TimePickerComponent通过道具传递一个时间字符串（字符串）（仅当初始数据存在时），并将其显示为“08:00”。代码：

class TimePickerComponent扩展React.Component{
_占位符；
_defaultTimeString；
_时间串；
_错误状态；
_班级；
构造函数（{占位符，defaultTimeString，timeString，errorStatus，Class}）{
超级（）；
这个。_占位符=占位符；
这。_defaultTimeString=defaultTimeString；
这个。_timeString=timeString；
这。_errorStatus=errorStatus；
这个._classes=类；
}
获取占位符（）{
返回此占位符。\u；
}
获取DefaultTimeString（）{
返回此。\u defaultTimeString？此。\u defaultTimeString:控制\u常量。默认\u时间\u字符串；
}
获取时间字符串（）{
返回此。\u timeString；
}
获取错误状态（）{
返回此信息。\u errorStatus；
}
获取类（）{
将此返回。_类；
}
render（）{
返回
}
}
TimePickerComponent.propTypes={
占位符：PropTypes.string.isRequired，
defaultTimeString:PropTypes.string，
时间字符串：PropTypes.string，
errorStatus:PropTypes.bool
}
导出默认样式（样式）（TimePickerComponent）；

TimeDurationPickerComponent通过道具传递一个TimeInMinutes（数字）。但显示与TimePickerComponent（“08:00”）的显示相同。代码：

class TimeDurationPickerComponent扩展了React.Component{
_占位符；
_时间单位：分钟；
_班级；
构造函数（{占位符，timeInMinutes，类}）{
超级（）；
这个。_占位符=占位符；
这是。_timeInMinutes=timeInMinutes；
这个._classes=类；
}
获取占位符（）{
返回此占位符。\u；
}
获取时间分钟（）{
返回此。\u timein分钟；
}
获取类（）{
将此返回。_类；
}
获取时间字符串（）{
让timeFormat=控件\u常量。时间\u格式。小时\u分钟\u冒号\u分开；
让duration=moment.duration（{minutes:this.TimeInMinutes}）；
//https://github.com/moment/moment/issues/463
return moment.utc（duration.asmillseconds（））.format（timeFormat）；
}
render（）{
返回
}
}
TimeDurationPickerComponent.propTypes={
占位符：PropTypes.string.isRequired，
timeInMinutes:PropTypes.number
}
导出默认的TimeDurationPickerComponent；

为了避免代码冗余，我在TimeDurationPickerComponent中重用了我的TimePickerComponent，只需将TimeInMinutes转换为TimeString，并通过props将其传递给TimePickerComponent

我现在的问题：这是我解决这个问题的好方法还是应该使用更高级的组件？或者我应该为此使用继承方法吗？哪种解决方案最好？为什么

---

提前谢谢你。

你在这里所做的可能很好。它也可以使用更高阶的组件来完成，但基于组合的方法（如您所拥有的）不会有任何性能问题，而且老实说，它可能比使用HOC更具可读性

另一方面，您应该使用this.props和this.state来表示类属性。它们内置于React组件中，并且会导致组件在发生更改时自动重新渲染

它还使您的代码更加简洁，因此，例如，您可以将第二个组件缩减为如下内容：

class TimeDurationPickerComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    createTimeString() {
        let timeFormat = CONTROLS_CONSTANTS.TIME_FORMATS.HOURS_MINUTES_COLON_SEPARATED;
        let duration = moment.duration({ minutes: this.props.TimeInMinutes });

        //https://github.com/moment/moment/issues/463
        return moment.utc(duration.asMilliseconds()).format(timeFormat);
    }

    render() {
        return <TimePickerComponent
            placeholder={this.props.Placeholder}
            timeString={this.createTimeString()}
            classes={this.props.Classes}
        />
    }
}

class TimeDurationPickerComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
}
createTimeString（）{
让timeFormat=控件\u常量。时间\u格式。小时\u分钟\u冒号\u分开；
让duration=moment.duration（{minutes:this.props.TimeInMinutes}）；
//https://github.com/moment/moment/issues/463
return moment.utc（duration.asmillseconds（））.format（timeFormat）；
}
render（）{
返回
}
}

使用流的组件示例：

// @flow

import React from 'react';

import './css/ToggleButton.css';

type Props = {
  handleClick: Function;
  label: string;
};

type LocalState = {
  active: bool,
};

class ToggleButton extends React.Component<Props, LocalState> {
  clickHandler: () => void;

  constructor(props: Props) {
    super(props);

    this.state = {
      active: true,
    };

    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler() {
    this.setState({ active: !this.state.active });
    this.props.handleClick();
  }

  render() {
    const buttonStyle = this.state.active ? 'toggle-btn-active' : 'toggle-btn-inactive';
    return (
      <button
        className={`toggle-btn ${buttonStyle}`}
        onClick={this.clickHandler}
      >{this.props.label}
      </button>
    );
  }
}

export default ToggleButton;

/@flow
从“React”导入React；
导入“./css/ToggleButton.css”；
类型道具={
handleClick：函数；
标签：字符串；
};
类型LocalState={
活动：布尔，
};
类ToggleButton扩展了React.Component{
clickHandler:（）=>void；
建造师（道具：道具）{
超级（道具）；
此.state={
主动：对，
};
this.clickHandler=this.clickHandler.bind（this）；
}
clickHandler（）{
this.setState（{active:！this.state.active}）；
this.props.handleClick（）；
}
render（）{
const buttonStyle=this.state.active？'toggle btn active'：'toggle btn inactive'；
返回(
{this.props.label}
);
}
}
导出默认切换按钮；

您在这里所做的可能很好。它也可以使用更高阶的组件来完成，但基于组合的方法（如您所拥有的）不会有任何性能问题，而且老实说，它可能比使用HOC更具可读性

另一方面，您应该使用this.props和this.state来表示类属性。它们内置于React组件中，并且会导致组件在发生更改时自动重新渲染

它还使您的代码更加简洁，因此，例如，您可以将第二个组件缩减为如下内容：

class TimeDurationPickerComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    createTimeString() {
        let timeFormat = CONTROLS_CONSTANTS.TIME_FORMATS.HOURS_MINUTES_COLON_SEPARATED;
        let duration = moment.duration({ minutes: this.props.TimeInMinutes });

        //https://github.com/moment/moment/issues/463
        return moment.utc(duration.asMilliseconds()).format(timeFormat);
    }

    render() {
        return <TimePickerComponent
            placeholder={this.props.Placeholder}
            timeString={this.createTimeString()}
            classes={this.props.Classes}
        />
    }
}

class TimeDurationPickerComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
}
createTimeString（）{
让timeFormat=控件\u常量。时间\u格式。小时\u分钟\u冒号\u分开；
让duration=moment.duration（{minutes:this.props.TimeInMinutes}）；
//https://github.com/moment/moment/issues/463
R
// @flow

import React from 'react';

import './css/ToggleButton.css';

type Props = {
  handleClick: Function;
  label: string;
};

type LocalState = {
  active: bool,
};

class ToggleButton extends React.Component<Props, LocalState> {
  clickHandler: () => void;

  constructor(props: Props) {
    super(props);

    this.state = {
      active: true,
    };

    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler() {
    this.setState({ active: !this.state.active });
    this.props.handleClick();
  }

  render() {
    const buttonStyle = this.state.active ? 'toggle-btn-active' : 'toggle-btn-inactive';
    return (
      <button
        className={`toggle-btn ${buttonStyle}`}
        onClick={this.clickHandler}
      >{this.props.label}
      </button>
    );
  }
}

export default ToggleButton;