我正在使用一个呈现字典列表的组件。我想选择性地传入一个将插入附加列表元素的 Prop 。
...
render() {
return (
<dl>
!! Optional !!
<dt>{this.props.optionalPropObj.label}</dt>
<dd>{this.props.optionalPropObj.value}</dd>
!! Optional !!
<dt>Label One</dt>
<dd>{this.props.foo.one}</dd>
<dt>Label Two</dt>
<dd>{this.props.foo.two}</dd>
<dt>Label Three</dt>
<dd>{this.props.foo.Three}</dd>
...
</dl>
);
}
有几种方法可以做到这一点,但我想最大限度地减少这种行为的逻辑足迹。主要问题是因为 React 需要一个包装元素和 <dt>
和<dd>
是子元素。
我可以分成两个返回,这是非常低效的:
...
if (this.props.optionalPropObj) {
return (
<dl>
// Include optional prop list element
</dl>
);
} else {
return (
<dl>
// Exclude optional prop list element
</dl>
);
}
我可以用 css 类隐藏它们,但是我有 4 个条件:
return (
<dl>
<dt className={this.props.optionalPropObj ? '' : 'hidden'}>
{this.props.optionalPropObj && this.props.optionalPropObj.label}
</dt>
<dd className={this.props.optionalPropObj ? '' : 'hidden'}>
{this.props.optionalPropObj && this.props.optionalPropObj.value}
</dd>
</dl>
);
如果我可以将元素包装在 div 中,这种情况就很简单了。
return (
...
{includeOptional && <OptionalThing />}
or
{includeOptional ? <OptionalThing /> : null}
...
);
理想情况下,我想要一种方法来检查一次可选属性并包含额外的元素,而无需任何代码重复。
最佳答案
我找到了一种使用有效的 Html 输出来做到这一点的方法。您有条件地包含元素数组。由于 <dl>
的唯一有效子元素标签是 <dt>
和<dd>
,我需要一种无需包装器即可添加片段的方法。
render() {
return (
<dl>
{
this.props.optionalPropObj &&
[
<dt key="optionalPropLabel">{this.props.optionalPropObj.label}</dt>,
<dd key="optionalPropValue">{this.props.optionalPropObj.value}</dd>
]
}
<dt>Label One</dt>
<dd>{this.props.foo.one}</dd>
<dt>Label Two</dt>
<dd>{this.props.foo.two}</dd>
<dt>Label Three</dt>
<dd>{this.props.foo.Three}</dd>
...
</dl>
);
}
编辑:由于我正在渲染一个数组,React 需要每个元素的键,所以我添加了一些虚拟键。我一次只在页面上显示其中一个,因此我的要求允许它们是静态的。
关于javascript - 如何在 React 组件中有条件地包含列表元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39982628/