过滤反应组件列表

【问题标题】：Filtering a list of react components过滤反应组件列表
【发布时间】：2017-09-24 12:31:30
【问题描述】：

我有这样的代码（jsx 的东西）：

let my_components = [<TCol dataField = {'id'} ... >{'id'}</TCol>];
    my_components.push(<TCol dataField = {'name'} ... >{'name'}</TCol>);
    ...
    my_components.push(<TCol dataField = {'zip'} ... >{'zip'}</TCol>);
    my_components.push(<TCol dataField = {'age'} ... >{'age'}</TCol>);

我还有另一个列表，例如：hideComps = {'zip', 'age'}。我需要获取另一个像 my_components 这样的对象，其中每个元素都属于 my_components，但它的 dataField 不在 hideComps 中。这可能吗？

【问题讨论】：

你不能只存储一个数据列表，然后从那里生成组件吗？
问题在于，除了 dataField 之外，还有其他复杂的选项可能在它们之间存在巨大差异。
也许我应该创建一张地图

标签： javascript reactjs ecmascript-6 state

【解决方案1】：

从技术上讲，这很简单，如果不认为这是一个糟糕的模式。而且你不必这样写dataField = {'id'}，没必要。你可以写dataField="id"

const hideComps = ['zip', 'age'];

let my_components = [<Main dataField="id">{'id'}</Main>];
my_components.push(<Main dataField="name">{'name'}</Main>);

my_components.push(<Main dataField="zip">{'zip'}</Main>);
my_components.push(<Main dataField="age">{'age'}</Main>);

const filtered_components = my_components.filter(item => hideComps.indexOf(item.props.dataField) === -1);

当你创建一个组件时（不管是通过 JSX 还是通过 React.createElement 或其他方式），你会收到一个指向 React Component 的链接，它本质上是一个常见的 JavaScript Object（如果你不这样做） t 使用TypeScript 当然），你可以访问他们的props。

【讨论】：