Question

我现在正在努力进行数天的设置，我认为这将是容易且可重用的：

我正在使用 Ionic 5 + React 构建一个应用程序，该应用程序具有一种新闻提要，其中包含多种内容。但不完全像Facebook那样，它对每种内容（例如事件，新闻等）都有不同的部分。

它们的行为相似：每个部分都有一个标题，显示前n个项目，然后显示“显示更多”链接。当然，单击这些项目之一会立即将用户带到详细信息页面。但是，点击“显示更多”应该会将用户带到仅包含该特定列表以扩展形式的页面（而不是说前3个项目应该有50个，而到达该列表的末尾它应该加载下一个50个等等）。

由于提供各种内容的API使用不同的结构，因此嵌入了“ 节组件”的页面会通过两个函数sourceFn和mapFn，该组件。 sourceFn处理该n个项目的加载，而mapFn处理一个项目并将该API数据结构映射到重用的 section组件呈现其列表项所需的字段。

到目前为止，效果很好。但我仍然停留在“显示更多”链接。因为在这里嵌入部分重定向到另一个页面，该页面动态显示展开的列表，所以需要知道相应的两个功能sourceFn和mapFn。我尝试了许多方法（例如https://stackoverflow.com/a/52064362），但是每一个方法都失败了。有时它说props某个地方是未知的，但主要是因为DataCloneError: The Object could not be cloned

每个提示我都很高兴，如何做到（或做得更好）

以下是我尝试过的一些方法：（请在评论中让我知道，是否要发布更多代码。我不想发送垃圾邮件0 ：））

<Link to={'/page/list'+ id} id={id} title={title} sourceFn={sourceFn} mapFn={mapFn}>
    <IonButton slot="end" size="small" fill="clear" routerDirection="forward">
        Show more
        <IonIcon icon={chevronForwardOutline} slot="end" />
    </IonButton>
</Link>

<Link to={{
    pathname: '/page/list'+ id,
    state: {id: id, title: title, sourceFn: sourceFn, mapFn: mapFn}
}}>
    <IonButton slot="end" size="small" fill="clear" routerDirection="forward">
        Show more
        <IonIcon icon={chevronForwardOutline} slot="end" />
    </IonButton>
</Link>

和App.tsx中的路线：

<Route
    exact={true}
    path={"/page/list/:sectionid"}
    render={(props) =>
        <List
            id={props.location.state.id}
            title={props.location.state.title}
            sourceFn={props.location.state.sourceFn}
            mapFn={props.location.state.mapFn}
        />}
/>

也很简单

<Route exact={true} path={"/page/list/:sectionid"} component={List} />

Answer 1

我认为这需要Context。

父级组件可以具有 sourceFn 和 mapFn 来自以下级别的上下文：

const SomeContext = React.createContext()

export const useContextName = React.useContext(SomeContext)

<SomeContext.Provider value={{ sourceFn, mapFn }}>
  ...your routes here...
</SomeContext.Provider>

然后在列表组件中，您可以执行以下操作：

import { useContextName } from 'wherever/you/are/exporting/from'

const List = (...your props ...) => {
   const { sourceFn, mapFn } = useContextName()
   ... the rest of your component ...
}

正如您所说，您的路线将仅仅是：

<Route exact={true} path={"/page/list/:sectionid"} component={List} />

Answer 2

我建议使用conda install -c conda-forge pyvisa方法，但您也可以像这样将函数名称作为参数名称传递

React.Context

在您的函数帮助器库中，映射所有函数，以便可以使用特定名称访问它们。

<Route exact={true} 
  path={"/page/list/:mapFuncName/:sourceFuncName/:sectionid"} 
  component={List} />

然后，当您需要一个功能时，可以使用该功能的名称在功能图中进行访问

mapFuncMap : {
  func1 : ()=> {}
  func2 : ()=> {}
  func3 : ()=> {}
}

sourceFuncMap : {
  func1 : ()=> {}
  func2 : ()=> {}
  func3 : ()=> {}
}

ReactJS：如何通过带有链接的功能传递给另一个组件？

2 个答案: