react-calendar-timeline允许props itemRenderer,该props itemRenderer可用于呈现定制时间线items.在我try 调用itemRenderer方法内部的useState钩子之前,它的工作方式应该是正常的.

我假设发生错误是因为我试图调用一个组件内部的useState钩子,该组件是使用较旧版本的Reaction实现的.假设这是真的,有谁知道如何在不使用类组件实现我的定制项呈现器的情况下进行修复?

这是一张minimum reproducible example美元的支票.注释掉CustomItemRenderer.jsx中的行,然后刷新沙箱以查看错误.

代码

CustomItemRenderer:

const CustomItemRenderer = ({ item, itemContext, getItemProps }) => {
  // Uncomment the line below to see the error
  // const [someCustomState, setSomeCustomState] = useState(null);

  return (
    <div {...getItemProps(item.itemProps)}>Custom {itemContext.title}</div>
  );
};

export default CustomItemRenderer;

Usage in Timeline:

<Timeline
  items={items}
  groups={groups}
  defaultTimeStart={defaultTimeStart}
  defaultTimeEnd={defaultTimeEnd}
  itemRenderer={CustomItemRenderer}
/>

推荐答案

挂钩只能由组件和自定义挂钩调用.您正在try 从标准函数调用useState.而是返回将CustomItemRenderer呈现为标准组件(sandbox)的函数:

const CustomItemRenderer = ({ item, itemContext, getItemProps }) => {
  const [someCustomState, setSomeCustomState] = useState(null);

  return (
    <div {...getItemProps(item.itemProps)}>Custom {itemContext.title}</div>
  );
};

export default props => <CustomItemRenderer {...props} />; // render the component

Reactjs相关问答推荐

在一个地方调用函数会影响其他地方调用该函数

Reaction Native:在初始获取后,Reducer变为未定义

TypeError:SearchProduct.get()获得了意外的关键字参数查询'

如何删除 bootstrap 手风琴上的边框

如何修复ReferenceError:在构建过程中未定义导航器

使用以Jest 的方式返回 Promise 的方法来模拟可构造的 API 类时出现问题

Material-UI 和 React Hook 表单不记录值

react 本机屏幕转换

在 React 中将 MUI 样式外包到单独的文件中?

修改React数据表扩展组件

redux 工具包使用中间件构建器函数时,必须返回一个中间件数组

在 React-Select 中显示多值的倒序

在 reactJS 中导航时页面重新加载

FlatList 不在 React Native 中呈现项目

使用 Vite 的 React 中的路由无法正常工作(构建中)

如何检索包含动态段的未解析路径?

react 页面更新

将 dict 值转换并插入到react 钩子的列表中

如何用实际的br标签替换axios响应中的br标签?

gtag:为什么谷歌分析即使没有被授权也会收集数据