React 选择器可以返回 jsx 吗？答案

【问题标题】：Can React selectors return jsx?React 选择器可以返回 jsx 吗？
【发布时间】：2017-11-15 17:30:14
【问题描述】：

当我编写我的 React 应用程序时，我将所有状态、道具计算保存在单独的函数中。我称它们为选择器，但我不确定它们是否是选择器。根据定义，选择器是返回状态或道具子集的函数。我有几个关于这个问题的问题：

1) 选择器可以返回 jsx 对象吗？

例如，我想将<Item /> 填充到另一个组件中

selectorItem = (state, props) => {
    const { items } = props;

    const ItemsJSX = items.map((item) => {
        return (
            <Item
                item={item}
                key={item.id}
            />
        )
    });

    return {
        items: ItemsJSX
    }
}

class Page extends Component {

render() {
        return (
            <List 
                {...selectorItem(this.state, this.props)}
            />
        )
    }
}

这是一个有效的选择器吗？如果没有，如何使用选择器将 JSX 填充到另一个组件中？

2) 我应该为每个组件编写选择器（选择器返回具有多个道具的对象）还是每个道具（每个道具单独的选择器）？

selectorItemsComments = (state, props) => {
    const { items } = props;
    const { comments } = props;

    const ItemsJSX = items.map((item) => {
        return (
            <Item
                item={item}
                key={item.id}
            />
        )
    });

    const CommentsJSX = comments.map((comment) => {
        <Comment
            comment={comment}
            key={comment.id}
        />
    });

    return {
        items: ItemsJSX,
        comment: CommentsJSX
    }
}

对

selectorItems = (state, props) => {
    const { items } = props;

    const ItemsJSX = items.map((item) => {
        return (
            <Item
                item={item}
                key={item.id}
            />
        )
    });

    return {
        items: ItemsJSX
    }
}

selectorComments = (state, props) => {
    const { comments } = props;
    const CommentsJSX = comments.map((comment) => {

        return (
            <Comment
                comment={comment}
                key={comment.id}
            />
        )
    });

    return {
        comment: CommentsJSX
    }
}

谢谢

【问题讨论】：

从技术上讲，您所说的“选择器”只是组件。

标签： reactjs

【解决方案1】：

这些不是 selectors 只是 functions 返回组件

TL;DR
简短的回答是肯定的，您可以从函数中返回 Components。

完整答案
在您更简单的第一个示例中，您应该只从您的selectorItem（我已将其重命名为renderItems）函数中返回组件数组：

const renderItems = (items) => items.map((item) => 
  <Item
    item={item}
    key={item.id}
  />          
);

const renderComments = (comments) => comments.map((comment) => 
  <Comment
    item={comment}
    key={comment.id}
  />          
);

class Page extends Component {  
  render() {
    const {items, comments} = this.props;
    return (
      <List>
        {renderItems(items)}
        {renderComments(comments)}
      </List>
    );
  }
}

我建议将renderItems 转换为Component，然后您可以执行以下操作：

<List>
  <Items items={items} />
  <Comments comments={comments} />
</List>

【讨论】：

【解决方案2】：

如果我理解正确，您的选择器仍然是 React 组件。这种模式称为“Smart vs Dumb”组件，或Presentational and Container Components。
你想要的是HOCs（高阶组件）吗？

【讨论】：