FragmentContainer 与仅作为包装器的另一个 React 组件？

Posted 2023-03-08

【中文标题】FragmentContainer 与仅作为包装器的另一个 React 组件？

【英文标题】：FragmentContainer vs just another React component as a wrapper?

【发布时间】：2020-02-18 12:36:06

【问题描述】：

我正在编写代码以将现有的 React 组件插入到另一个组件中。

最初在代码中完成的方式是使用片段容器。 我知道 fragmentContainer 是一个高阶组件，它充当包装器，并返回另一个 React 组件。 但是，我试图了解我是否真的需要使用 fragmentContainer 来插入我现有的组件，或者我可以创建另一个包装器组件。

是否有确定的方法来确定在 React 组件中应该在哪里使用 fragmentContainer 和 React 组件？

我查看了官方文档(https://relay.dev/docs/en/fragment-container) 和其他资源，但似乎任何一种方式都可以使用？ 是否存在应该使用片段容器的特殊情况？

【参考方案1】：

您使用 fragmentContainer 来确保组件中需要哪些数据。

例如：

父.js

const ParentComponent = (list) => (
   <QueryRenderer
      query=graphql`
         query List 
            id
            ...childComponent_item
         
      `
      render=
         list.map(item => (
            <ChildComponent item=item key=item.id />
         ))
      
   />
);
export default ParentComponent;
// Here, in  the parent component
// I need the id of each item of the list but I don't need the others values.

childComponent.js

const ChildComponent = item => (
   <>
      <div>item.name</div>
      <div>item.avatar</div>
      <div>item.othervalue</div>
   </>
)
const ChildComponentWithFragment = createFragmdentContainer(
   ChildComponent, 
   
      list: graphql`
         fragment childComponent_item on ItemType 
            name
            avatar
            othervalue
         
      `
   ;
export default ChildComponentWithFragment;
// Here in the child component
// I need the others data of the Item object so i have to get these values
// in my fragment