我是个新手,我有一个问题。我有一些代码可以为某些选项卡填充一些信息,并且我需要一些帮助来创建一个可以多次重用的函数,而不是为每个选项卡重用相同的代码。
<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个变量,但我一直在为每个选项卡重用此块。在这种情况下,减少代码重用的最佳方法是什么?谢谢!
答案 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>);
}