![](/img/trans.png)
[英]How to use React.forwardRef() in in functional component react js
[英]Calling a functional forwardRef component React
我正在构建一个组件,它调用一个通过道具传递的组件。 该组件在其中使用前向引用,因此我无法调用它。 它显示itemComponent
。
代码:
父组件:
export default function DNDList({
items,
idKey = 'id',
itemComponent,
listStyles,
hideParentList
}) {
const [state, dispatch] = useReducer(dndReducer, items);
const previewRef = useRef(null);
const onMove = (dragIndex, hoverIndex) => {
dispatch({
type: 'switch',
data: {
to: hoverIndex,
from: dragIndex
}
});
};
console.log(itemComponent);
const renderItems = () => (
<>
{state.map((item, i) => (
<Item previewRef={previewRef} id={item[idKey]} key={item[idKey]} index={i} onMove={onMove}>
{/* Main Code, Item Component is a forward Ref, see example below */}
{itemComponent ? itemComponent({ item, ref:previewRef }) : item[idKey]}
</Item>
))}
</>
);
return hideParentList ? (
renderItems()
) : (
<ul className={listStyles}>{renderItems()}</ul>
);
}
itemComponent
示例:
const TemplateListBlock = forwardRef(({ item }, ref) => {
const onRemoveSender = () => {};
console.log(ref);
return (
<li className={`${styles.contentBlock}`} data-template="true">
<div className="drag-handler no-select" ref={ref}>
<Menu />
</div>
<div className={styles.templateSettings}>
<TemplateSenderOptions message={item} onRemoveSender={onRemoveSender} />
</div>
<p className={commonStyles.senderWrapper}>
<span className={commonStyles.sender}>{item.from}</span> will appear
here.
</p>
</li>
);
});
第一个组件中使用的组件:
function Item({ id, index, onMove, children }) {
const ref = useRef(null);
drag(drop(ref));
return (
<li style={{ opacity }} key={id} ref={ref} data-handler-id={handlerId}>
{children}
</li>
);
}
而不是像这样传递previewRef
: <Item previewRef={previewRef}...
尝试像这样传递它: <Item ref={previewRef}...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.