我在這里查看了其他一些類似的問題，但似乎沒有一個解決方案對我有用。
我有一個類組件，它代表網格上的一個單元格，對于每個單元格，我希望有一個特定的背景影像，該背景影像在單元格懸停時顯示。默認組件如下所示：
const Home = () => {
return (
<div id="main">
<Box title='About' svg={ BG1 } />
<Box title='Work' svg={ BG2 } />
<Box title='Portfolio' svg={ BG3 } />
<Box title='Resume' svg={ BG4 } />
</div>
);
};
我想將 SVG 組件作為背景影像傳遞，但似乎無法弄清楚。我已經像這樣匯入了每個背景影像：
import { ReactComponent as BG1 } from './bg1.svg';
在Box組件中，我添加了狀態來處理一些子元素，并且title道具似乎效果很好，但svg道具似乎對我不起作用：
class Box extends React.Component {
constructor(props) {
super(props);
this.state = {
hovered: false,
};
}
hoverOn = e => {
this.setState({ hovered: true });
};
hoverOff = e => {
this.setState({ hovered: false });
};
render() {
const { hovered } = this.state;
const style = hovered ? { transform: 'translateY(-20%)', opacity: '.05' } : {};
return(
<section onMouseEnter={this.hoverOn} onMouseLeave={this.hoverOff}>
<a>
<div className="overlay" style={ style }></div>
<div className="bg" style={{ backgroundImage: `url(${this.props.svg})` }} ></div>
<div className="innerContent">
<h2>
{this.props.title}
</h2>
</div>
</a>
</section>
);
};
};
每當我檢查我的發育部位時，我只看到<div class='bg'></div>. 有什么建議？
uj5u.com熱心網友回復：
它不起作用，因為 BG1 被設定為 SVG 檔案內容；不是 SVG 檔案的鏈接。我認為您可以只參考檔案名，url("./bg1.svg")它會在構建時擴展它。但是，當您僅將檔案名作為道具傳遞時，這可能不起作用。所以 - 您可以將 SVG 放入公共檔案夾并執行以下操作：{process.env.PUBLIC_URL '/img/logo.png'}. 逃生艙醫生。
使用 Vite，您可以這樣做：import modelGLB from './static/model.glb?url'獲取 URL，但我忘記了 create-react-app 等效項。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432810.html