Является ли хорошей практикой использование getter для визуализации другого компонента внутри компонента React?

Question

В некоторых случаях методы получения становятся удобными.Но как насчет использования метода get для визуализации компонента React или всего DOM?Не лучше ли для этой цели использовать классический метод вместо геттера?И почему именно?

У меня есть ощущение, что с этим что-то не так, но я также знаю, что это может быть связано с чувствами автора.

Так что вопрос в том, хорошо ли этокстати вообще?Или каковы ваши предпочтения?

class Attachment extends React.Component {

  get file() {
    return this.props.fields.File;
  }
  get label() {
    return this.props.fields.Label;
  }

  // I'm asking about these 2 getters below this comment

  get editableAttachment() {
    return <SomeComponent field={this.label} />;
  }

  get attachment() {
    return (
      <a
        href={this.file && this.file.value && this.file.value.src}
        target="_blank"
      >
        {(this.label && this.label.value)}
      </a>
    );
  }

  render() {
    return (
      <div className="ui-some-component">
        {this.props.isPageEditing ? this.editableAttachment : this.attachment}
      </div>
    );
  }
}

Заранее спасибо.

Answer 1

Я думаю, что все сводится к предпочтениям.Вы не получите никакой выгоды от отсрочки расчета по сравнению с более простым if x do this, if y do that рендерингом - оба должны делать свою работу.

Мои два цента - сделать компонент простым и читабельным.Прыжки вокруг класса для каждого условия усложняют работу следующего разработчика.

Answer 2

Это очень по вкусу потребителю, я считаю, что если вы не вводите варварства, то любой код хорош.

Также верно, что чем более понятен код, тем лучше.Я бы постарался сделать код максимально простым и разборчивым для человека, который не знает мой код.

С другой стороны, я стараюсь сделать компоненты максимально простыми и наглядными.

Может быть, это будет пример вашего собственного кода с использованием "моего руководства по стилю":

const Attachment = ({ isPageEditing, fields }) => {
  const { file, label } = fields;

  const attachment = isPageEditing ? (
    <SomeComponent field={fields.label} />
  ) : (
    <a href={file && file.value && file.value.src} target="_blank">
      {label && label.value}
    </a>
  );

  return <div className="ui-some-component">{attachment}</div>;
};

Я надеюсь, что помог вам, Бест