如何使此JSX代码更通用以避免在React中重用代码?

时间:2019-03-07 00:44:02

标签: reactjs redux jsx

我是个新手,我有一个问题。我有一些代码可以为某些选项卡填充一些信息,并且我需要一些帮助来创建一个可以多次重用的函数,而不是为每个选项卡重用相同的代码。

<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}
                </pre>
            </div>
        </div>
    </div>

我当时想我可以创建一个populateTabs函数,该函数可以将props的计数,平均长度和原始字符串数据作为参数。每个选项卡的count,avg_length和raw_strings不同,因为它们分别表示不同的字符串类型,因此尽管仅更改了3个变量,但我一直在为每个选项卡重用此块。在这种情况下,减少代码重用的最佳方法是什么?谢谢!

2 个答案:

答案 0 :(得分:2)

可以将代码提取到组件。如果某些参数在某些情况下是通用的,则可以是接受通用参数的高阶组件:

Func<string, bool> nameFilter = str => str[0] == 'S';

答案 1 :(得分:2)

React完全是关于组件的,因此最好不要将常规标记提取到组件中,而可以将其标记为组件,而组件实际上可以是“功能组件”(而不是“类组件”)。< / p>

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}
        </pre>
      </div>
    </div>
  </div>);
}

如果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>);
}