JSX 回调，不传递单独的 props答案

【问题标题】：JSX callback without passing individual propsJSX 回调，不传递单独的 props
【发布时间】：2021-03-22 00:24:04
【问题描述】：

我想知道是否有办法在 JSX 中复制 js 回调的相同用法，例如：

[1,2,3].map(console.log) // Here map iterator takes care of passing values to iteratee.

有没有类似的方式来传递这样的组件，即。而不是这个：

<List data={data} renderItem={item => <Post {...item} />} />

类似这样的：

<List data={data} renderItem={<Post/>} />

【问题讨论】：

如果你看到 props 与回调函数非常相似，你传递一些东西并在孩子中使用它。假设您将一个函数从父级传递给子级，子级将调用该函数，就像您将回调函数传递给函数 A 一样，A 稍后会调用回调函数。

标签： javascript reactjs typescript callback jsx

【解决方案1】：

啊，好吧，刚刚发现你可以将组件用作普通的 js 函数：

 <List data={data} renderItem={Post} />

【讨论】：

【解决方案2】：

您可以，但是从经验来看，一旦这些组件增长并且需求发生变化，这会在以后导致痛苦和糟糕的设计。 List 组件变得更加深奥，很难找到应该放在哪里。

例如，如果您想做一些简单的事情，比如渲染赞助的Post，代码就会变得不必要地复杂：

// Index.js
<List data={data} renderItem={Post} renderSponsoredItem={SponsoredPost} />

// List.js
function List({ data, renderItem, renderSponsoredItem }) {
  <div className={styles.list}>
    data.map(dataItem => {
      if (dataItem.sponsored) {
        return renderSponsoredItem(dataItem);
      } else {
        return renderItem(dataItem);
      }
    });
  </div>
}

...在某种程度上，这最终看起来一点也不像 React，并且没有利用 React 的易用性和可读性。

另一种可能类似于：

// Index.js
<List>
  {data.map(dataItem => {
    if (dataItem.sponsored) {
      return <SponsoredPost post={dataItem} />;
    } else {
      return <Post post={dataItem} />
    } 
  })
</List>

// List.js
function List({ children }) {
  <div className={styles.list}>
    {children}
  </div>
}

我发现从长远来看，第一种形式适合不可读的代码和不可行、不可读的组件，而后者更容易阅读/使用。

【讨论】：

感谢您的详细回答，但恕我直言，如果我们从父组件级别（在本例中为 List）查看，则不需要知道它应该呈现哪种类型的 Post 的详细信息。您基本上可以在 Post 中使用条件逻辑来确定当前数据元素是 SponsoredPost 还是其他类型的 Post。另外，List 实际上是来自akveo.github.io/react-native-ui-kitten/docs/components/list/… 的一个组件
就像我说的，你可以朝那个方向走，但它几乎普遍会导致更混乱的代码和糟糕的组件设计。您显然受到库代码的限制，但 IMO 该库中的组件设计很差。