如何解决导出变量-React
我有一个名为Component1的组件,其中有以下代码:
import React,{ useState } from "react";
import Popover from "material-ui-popup-state/HoverPopover";
import Fab from "@material-ui/core/Fab";
import {
usePopupState,bindHover,bindPopover
} from "material-ui-popup-state/hooks";
import PaletteIcon from "@material-ui/icons/Palette";
import Colors from "./Colors";
const DEFAULT_COLOR = "red";
const COLORS = [/*list of colors*/];
const Component1 = ({ classes }) => {
const popupState = usePopupState({
variant: "popover",popupId: "demoPopover"
});
const [selectedColor,setSelectedColor] = useState(DEFAULT_COLOR);
return (
<div className="box" style={{ backgroundColor: selectedColor }}>
<Fab variant="extended" {...bindHover(popupState)}>
<PaletteIcon />
</Fab>
<Popover
>
<div className="color-palette">
{COLORS.map((color) => (
<Colors
key={color}
selected={selectedColor === color}
onClick={setSelectedColor}
color={color}
/>
))}
</div>
</Popover>
</div>
);
};
export default Component1;
此组件是在Component2中导入的,其代码为:
import React from "react";
import Component1 from "./Component1";
import Fab from "@material-ui/core/Fab";
import DeleteIcon from "@material-ui/icons/Delete";
function Component2(props) {
function handleClick() {
props.onDelete(props.id);
}
return (
<div className="note" style={{ backgroundColor: "selectedColor" }}>
<h1>{props.title}</h1>
<p>{props.content}</p>
<Fab onClick={handleClick}>
<DeleteIcon fontSize="small" />
</Fab>
<HoverPopover />
</div>
);
}
export default Component2;
在component2中,我需要将const selectedColor
与div
一起使用class="note"
作为样式。但是,问题是当我从COLORS
列表中选择颜色时,div
和class="note"
的背景颜色没有改变。我尝试了很多选择,但我不知道如何正确执行。请告诉我正确的做法。
解决方法
要共享实际上是状态的“ selectedColor”变量,您必须将其通过道具传递给子组件
您的“ Component2”应声明状态“ selectedColor”,并且此状态及其功能必须由道具传递给您的“ Component1”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。