在导入的组件之间传递反应状态

Question

我正在尝试使用 React 将状态从父级传递到子级，但是两个组件都被导入，因此没有声明父组件的状态变量。

我有两个组件都从同一个文件导出。第一个组件是第二个组件的包装器。 此组件具有 useEffect 函数，该函数可查找其高度和宽度并将这些值设置为挂钩状态。

export const TooltipWrapper = ({ children, ariaLabel, ...props }) => {
const [width, setWidth] = React.useState(0);
const [height, setHeight] = React.useState(0);
const ref = React.useRef(null);
React.useEffect(() => {
if (ref.current && ref.current.getBoundingClientRect().width) {
setWidth(ref.current.getBoundingClientRect().width);
}
if (ref.current && ref.current.getBoundingClientRect().height) {
setHeight(ref.current.getBoundingClientRect().height);
}
});
return <TooltipDiv>{children}</TooltipDiv>;

从同一文件导出的下一个组件如下所示

export const Tooltip = ({
ariaLabel,
icon,
iconDescription,
text,
modifiers,
wrapperWidth,
}) => {
return (
<TooltipContainer
aria-label={ariaLabel}
width={wrapperWidth}
>
<TooltipArrow data-testid="tooltip-arrow" modifiers={modifiers} />
<TooltipLabel
aria-label={ariaLabel}
>
{text}
</TooltipLabel>
</TooltipContainer>
);
};

组件Tooltip期待道具wrapperWidth。 这就是我想从TooltipWrapper组件传入宽度钩子值的地方。

这两个组件都导入到我的应用程序组件中

import React from "react";
import { GlobalStyle } from "./pattern-library/utils";
import { Tooltip, TooltipWrapper } from "./pattern-library/components/";

function App() {
return (
<div className="App">
<div style={{ padding: "2rem", position: "relative" }}>
<TooltipWrapper>
<button style={{ position: "relative" }}>click </button>
<Tooltip
modifiers={["right"]}
text="changing width"
wrapperWidth={width}
/>
</TooltipWrapper>
</div>
</div>
);
}

在这里，我被告知没有定义宽度，这是我所期望的，因为我没有在此文件中声明宽度。

有没有人知道如何访问 App 文件中父组件的width和height状态值？

Answer 1

渲染道具可以工作：

在<TooltipWrapper>中添加renderTooltip道具：

<TooltipWrapper renderTooltip={({ width }) => <Tooltip ...existing wrapperWidth={width} />}>
<button style={{ position: 'relative' }}>click</button>
</TooltipWrapper>

铌。...existing只是您正在使用的其他道具Tooltip

然后更新<TooltipWrapper>的返回：

return (
<TooltipDiv>
{children}
props.renderTooltip({ width }); 
</TooltipDiv>
);