Reactjs 你能在React中的一些道具上部分应用一个组件吗？

我有两个不同的组件

AnimeList

和

MangaList

，它们共享相似的逻辑，所以我想在它们之间共享代码。以下是我目前的做法：

const AnimeList = (props) => <AnimangaList isAnime={true} {...props} />;
const MangaList = (props) => <AnimangaList isAnime={false} {...props} />;

return (
    <Tab.Navigator>
        <Tab.Screen name="Anime" component={AnimeList} />
        <Tab.Screen name="Manga" component={MangaList} />
    </Tab.Navigator>
);

const AnimeList=（道具）=>；
const MangaList=（道具）=>；
返回(
);

---

在React/React Native中是否有更短或更方便的方法来执行此操作？类似于

function.bind（）

？这感觉非常强大。

当我需要为大量组件上的几个属性设置不同的值时，我通常使用静态数组

const pages = [
  {
    isAnime: true,
    name: 'Anime',
  },
  {
    isAnime: false,
    name: 'Manga',
  },
];

// mocks for some components
const MangaList = ({ isAnime }) => <div>{isAnime}</div>;
const Screen = ({ name, component: Component }) => (
  <div>
    {name}
    <Component />
  </div>
);

---

你认为这很重要？在我看来相当标准，或者至少我通常如何处理创建通用组件的特定“实例化”。我可能会建议在

isAnime={true | false}

之前传播道具，这样传递的道具不会无意中覆盖所需的

isAnime

prop值。我认为另一种选择是“匿名”箭头组件，但这实际上只保存了

const

声明。为什么不将

作为子级传递给

，这样您就有了充分的灵活性？

{pages.map((p, i) => (
      <Screen key={i} name={p.name} component={(props) => <MangaList isAnime={p.isAnime} {...props} />} />
 ))}