Как сделать этот код JSX более универсальным, чтобы избежать повторного использования кода в React?

Question

Я довольно новичок, чтобы среагировать, и у меня возник вопрос.У меня есть код, который заполняет некоторые вкладки некоторой информацией, и мне нужна помощь в создании функции, которую можно многократно использовать несколько раз вместо повторного использования одного и того же кода для каждой вкладки.

<code><div className="box box-default">
        <div className="box-header with-border">
        <h3 className="box-title">Strings Info</h3>
        <div className="key-details">
            <dl className="dl-horizontal">
                <dt>Count</dt>
                <dd>{count}</dd>
                <dt>Average Length</dt>
                <dd>{avg_length}</dd>
            </dl>
        </div>
        </div>
        <div className="box-header with-border">
            <h3 className="box-title">Strings</h3>
            <div>
                <pre>
                    {this.props.raw_strings}
                

Я думал, что смогу создать функцию populateTabs, которая будет принимать данные подсчета, средней длины и необработанные строки из реквизитав качестве параметра.Количество, avg_length и raw_strings различны для каждой вкладки, поскольку они представляют разные типы строк, поэтому я повторно использовал этот блок для каждой вкладки, несмотря на изменение только трех переменных.Каков наилучший способ сократить повторное использование кода в этой ситуации?спасибо!

Answer 1

React - это все о компонентах, поэтому лучше, чем обычная функция, лучше извлекать общую разметку в компонент, который на самом деле может быть «компонентом функции» (в отличие от «компонента класса»).

<code>export function PopulateTab({ avgLength, count, rawStrings }) {
  return (<div className="box box-default">
    <div className="box-header with-border">
      <h3 className="box-title">Strings Info</h3>
      <div className="key-details">
        <dl className="dl-horizontal">
          <dt>Count</dt>
          <dd>{count}</dd>
          <dt>Average Length</dt>
          <dd>{avgLength}</dd>
        </dl>
      </div>
    </div>
    <div className="box-header with-border">
      <h3 className="box-title">Strings</h3>
      <div>
        <pre>
          {rawStrings}
        

); }

, если tabsContents - это массив объектов типа ..

const tabsContents = [
  { avgLength: 5, count: 8, rawStrings: "foo" },
  { avgLength: 6, count: 12, rawStrings: "bar" },
];

вы можете использовать PopulateTab, вот так ..

import { PopulateTab } from "./populate-tab";

function Tabs({ tabsContents }) {
  return (
    <div>
      {tabsContents.map(
        ({ avgLength, count, rawStrings }) =>
          <PopulateTab avgLength={avgLength} count={count} rawStrings={rawStrings} />
      )}
    </div>
  );
}

или, точнее ..

function Tabs({ tabsContents }) {
  return (<div>{tabsContents.map(props => <PopulateTab {...props} />)}</div>);
}

Answer 2

Код можно извлечь в компонент.Если некоторые параметры являются общими в некоторых случаях, это может быть компонент более высокого порядка, который принимает общие параметры:

<code>const boxHOC = (count, avg_length) => props => (
    <div className="box box-default">
        <div className="box-header with-border">
        <h3 className="box-title">Strings Info</h3>
        <div className="key-details">
            <dl className="dl-horizontal">
                <dt>Count</dt>
                <dd>{count}</dd>
                <dt>Average Length</dt>
                <dd>{avg_length}</dd>
            </dl>
        </div>
        </div>
        <div className="box-header with-border">
            <h3 className="box-title">Strings</h3>
            <div>
                <pre>
                    {props.raw_strings}
                

);const OneTwoBox = boxHOC (1, 2);const ThreeFourBox = boxHOC (3, 4);