我有這個組件
const MyComponent = (props) => {
const classes = useStyles(props);
return (
<div
className={classes.divBackground}
backgroundImageLink={props.product?.image}
sx={{ position: "relative" }}
></div>
);
};
export default MyComponent;
我正在嘗試在道具中傳遞backgroundImage鏈接并嘗試放入 makeStyles
export default makeStyles(props => ({
divBackground:{
background:`url("${props.backgroundImageLink}")`,
}
}));
但這不起作用
＆我在控制臺中收到此警告
index.js:1 Warning: React does not recognize the `backgroundImage` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `backgroundimage` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
uj5u.com熱心網友回復：
const MyComponent = (props) => {
const classes = useStyles(props)();
return (
<div
className={classes.divBackground}
backgroundImageLink={props.product?.image}
sx={{ position: "relative" }}
></div>
);
};
export default MyComponent;
然后 ：
export default useStyles=(props)=>makeStyles(()=> ({
divBackground:{
background:`url("${props.backgroundImageLink}")`,
}
}));
uj5u.com熱心網友回復：
您不應該將任意屬性傳遞給本機元素（div在本例中），因為它不執行任何操作。該道具僅在傳入時有效useStyles：
export default makeStyles(props => ({
divBackground:{
background:`url("${props.product?.image}")`,
}
}));
用法
const MyComponent = (props) => {
// you only need to pass the props here. useStyles will then use the
// prop.product.image to create the background property, generate a
// stylesheet and return the class name for you.
const classes = useStyles(props);
return (
<div
className={classes.divBackground}
// remove this line -----> backgroundImageLink={props.product?.image}
sx={{ position: "relative" }}
></div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/359544.html
標籤：javascript 反应 dom 材质-ui
下一篇：Vue更改為陣列而不更新DOM