javascript - 过滤 react 组件列表

Question

我有这样的代码(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 中。这可能吗？

Answer 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(当然，如果您不使用 TypeScript)，您就可以访问它们的 props。