反应设置图像道具
React Set Image Props
大家好,我是 REACT 的新手,我正在尝试将我的图像道具传递给 {logo} 有人知道我该如何设置吗?
显示了123,但我还是想念图片
export default class StickyHeader extends React.Component {
static propTypes = {
}
static defaultProps = {
}
render() {
const { logo } = this.props;
return (
<header>
<div className={'logo'}>
{logo}
</div>
<div>123</div>
</header>
);
}
}
<StickyHeader logo={ <img src="http://via.placeholder.com/350x150" alt="" /> }></StickyHeader>
在这种情况下,我会将图像标签放入粘性 header 组件中,然后仅将徽标 url 作为 属性 传递,这样您的渲染方法看起来更像这样:
render() {
const { logoUrl } = this.props;
return (
<header>
<div className={'logo'}>
<img src={logoUrl} />
</div>
<div>123</div>
</header>
);
}
}
然后是你的用法-
<StickyHeader logoUrl={'http://via.placeholder.com/350x150'} />
大家好,我是 REACT 的新手,我正在尝试将我的图像道具传递给 {logo} 有人知道我该如何设置吗? 显示了123,但我还是想念图片
export default class StickyHeader extends React.Component {
static propTypes = {
}
static defaultProps = {
}
render() {
const { logo } = this.props;
return (
<header>
<div className={'logo'}>
{logo}
</div>
<div>123</div>
</header>
);
}
}
<StickyHeader logo={ <img src="http://via.placeholder.com/350x150" alt="" /> }></StickyHeader>
在这种情况下,我会将图像标签放入粘性 header 组件中,然后仅将徽标 url 作为 属性 传递,这样您的渲染方法看起来更像这样:
render() {
const { logoUrl } = this.props;
return (
<header>
<div className={'logo'}>
<img src={logoUrl} />
</div>
<div>123</div>
</header>
);
}
}
然后是你的用法-
<StickyHeader logoUrl={'http://via.placeholder.com/350x150'} />