reactjs - 函数组件不能被赋予 refs。尝试访问此 ref 将失败
问题描述
我使用了该库react-beautiful-dnd
,但尝试在 MenuItem 组件中传递 ref 时出现错误。我用 React.forwardRef 做了一个 HOC,但没有帮助。如果有人知道如何解决这个问题,我将不胜感激。
代码:
const RefMenuItem = React.forwardRef((props, ref) => (
<MenuItem
onClick = {props.onClick}
ref = {ref}
{...props.provided.dragHandleProps}
{...props.provided.draggableProps}
>
{props.children}
</MenuItem>
));
export default function DraggableItem({ item, index, onClick }) {
// const classes = useStyles();
return (
<Draggable draggableId={item.id} index={index}>
{provided => (<RefMenuItem
onClick = {onClick}
ref = {provided.innerRef}
provided = {provided}
>
<DragIndicatorIcon />
{item.name}
<CreateIcon />
</RefMenuItem>)}
</Draggable>
);
}
<Select
variant = 'outlined'
value = {selectedValue}
className = {selectClasses}
>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId='list'>
{provided => (<div ref = {provided.innerRef} {...provided.droppableProps}>
{state.items.map((item, index) => (
<DraggableItem
item = {item}
index = {index}
key = {item.id}
onClick = {handleAudienceChange}
/>
))}
{provided.placeholder}
</div>)}
</Droppable>
</DragDropContext>
</Select>
解决方案
用于HTML DOM元素并用于ref
React组件。innerRef
<MenuItem
innerRef={provided.innerRef}
...
/>
推荐阅读
- javascript - 值始终在 console.log 中可见,但有时在输入字段中不可见
- python-3.x - 迭代项目列表并从 Web 浏览器中提取列表的数据并将数据框附加为最终输出
- csv - 抓取任务的多处理
- css - 基于移动设备上点击位置的下拉列表弹出 CSS
- html - 如何在内容可编辑字段中渲染图像?
- python - 我的 Python 项目无法在不同的 IDE 上运行
- firebase - 手动将项目添加到颤振中的 Stram builder
- flutter - 在 Appbar Flutter 中添加 SearchBar
- php - Woocommerce 需要显示的单选按钮字段
- android - Phone_F.java 问题值
这是我的代码
package com.g.tok.ActivitesFragment.Accounts; import android.annotation.SuppressLint; import android.co