0

Всем доброго дня. У меня есть вот такой код:

class Order extends Component {
  constructor(props) {
    super(props);

    this.state = {
    date: new Date(),
    time: '',
    morningTime: ['10-00', '10-30', '11-00', '11-30'],
    dayTime: ['12-00', '12-30', '13-00', '13-30', '14-00', '14-30', '15-00', '15-30', '16-00', '16-30'],
    eveningTime: ['17-00', '17-30', '18-00', '18-30', '19-00', '19-30', '20-00'],
    }
  }

  onClick = (event) => {
    this.setState({time: event.target.innerText})
  };

  onChange = date => this.setState({ date });


  render() {
    // const serviceValue = this.props.service || this.props.location.state.service;
    // const priceValue = this.props.price || this.props.location.state.price;
    return(<div>
      <Header/>
      <div className={styles.bodyContainer}>
        <Link to="/onlineRegistration/ourServices/nails">
          <p className={styles.back}>&#60; Назад</p>
        </Link>
        <h3>Расписание</h3>
      <div className={styles.calendarContainer}>
        <Calendar 
          className={styles.calendar}
          onChange={this.onChange}
          value={this.state.date}
        />
        <OrderDate
          value={this.state.date.toDateString()}
          time={this.state.time}
          address={'/orderInfoClient'}
          history={this.props.history}
          // service={serviceValue}
          // price={priceValue}
        />
      </div>
      <div className={styles.time}>
      <div className={styles.morning}>
        <p className={styles.dayTime}>Утро</p>
        {this.state.morningTime.map((time, i) => (
        <button key={i} value={this.state.time} onClick={this.onClick}>
        {time}
        </button> 
        ))}
      </div>
      <div className={styles.day}>
        <p className={styles.dayTime}>День</p>
        {this.state.dayTime.map((time, i) => (
        <button key={i} value={this.state.time} onClick={this.onClick}>
        {time}
        </button> 
        ))}
      </div>
      <div className={styles.evening}>
        <p className={styles.dayTime}>Вечер</p>
        {this.state.eveningTime.map((time, i) => (
        <button key={i} value={this.state.time} onClick={this.onClick}>
        {time}
        </button> 
        ))}
      </div>
      </div>
      </div>
      <Footer/>
    </div>)
  }
}

export default Order;

Как мне его уменьшить и написать одной функцией, чтобы не было копипасты?

9
  • 4
    Создать компонент? Как бы базовые вещи.
    – user355286
    10 фев 2020 в 7:23
  • Да нет, как написать эти 3 дива одной функцией. 10 фев 2020 в 7:30
  • 4
    Создать компонент? Как бы базовые вещи.
    – user355286
    10 фев 2020 в 7:39
  • Вы пишите мне вынести в отдельный компонент. Хорошо, я переформулирую: предположим я вынес его в отельный компонент, внутри этого компонента у меня будет та же самая копиписта. Как мне оптимизировать код и превратить его в одну большую функцию, а не в 3 маленьких? Здесь используется 3 разных стиля, как быть с ними? 10 фев 2020 в 11:44
  • У вас в компоненте будет только один див, который будет принимать разные стили
    – user355286
    10 фев 2020 в 11:52

1 ответ 1

1

Работоспособность не проверял.

Внутри Состояния

xxx: [
  {
    name: 'Утро',
    timeArray: ['10-00', '10-30', '11-00', '11-30'],
    style: styles.morning
  },
  {
    name: 'День',
    timeArray: ['12-00', '12-30', '13-00', '13-30', '14-00', '14-30', '15-00', '15-30', '16-00', '16-30'],
    style: styles.day
  },
  {
    name: 'Вечер',
    timeArray: ['17-00', '17-30', '18-00', '18-30', '19-00', '19-30', '20-00'],
    style: styles.evening
  },
]

Внутри render

const yourComponents = this.xxx.map(({ name, timeArray, style }) => (
  <YourComponent
   style       = {style}
   array       = {timeArray}
   staticStyle = {styles.dayTime}
   time        = {this.state.time}
   onClick     = {this.onClick}
  >{name}</YourNComponent>
));

Внутри return

.... 
{ yourComponents }
....

Компонент

function YourComponent({style, staticStyle, time, array, onClick, children}) {

  const onClickHandler(e) => onClick(e)

  const buttons = array.map((time, i) =>
    (<button key={i} value={time} onClick={onClickHandler}>{ t }</button>)

  return (
    <div className={style}>
      <p className={staticStyle}>{children}</p>
      {buttons}
    </div>
  )
}

И всё равно это выглядит плохо. Что бы выглядело хорошо, нужно изначально всё правильно продумывать.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.