gpt4 book ai didi

javascript - 组件不会渲染

转载 作者:行者123 更新时间:2023-11-30 14:28:59 25 4
gpt4 key购买 nike

我正在将一组对象传递给 TileFeed 并取出用于页面上每个图 block 的缩略图 URL。正在提取 URL,但由于某种原因未呈现实际磁贴。当我用控制台输出 thumb.thumbnail 时,我得到了正确的输出。 enter image description here

class TileFeed extends Component {
render() {
const { thumbnail } = this.props;
return thumbnail.map(thumb => {
console.log(thumb.thumbnail);
<div key={thumb._id} className="row__inner">
<div className="tile">
<div className="tile__media">
<img
className="tile__img"
id="thumbnail"
src={thumb.thumbnail}
alt=""
/>
</div>
</div>
</div>;
});
}
}

调用 TileFeed 的类

render() {
const { videos, loading, key } = this.props.videos;
let videoContent;
if (videos === null || loading) {
videoContent = <Spinner />;
} else {
videoContent = <TileFeed thumbnail={videos} />;
}
console.log({ videoContent });

return (
<div className="explore">
<div className="row">{videoContent} </div>
</div>
);
}

最佳答案

您没有从给定 map 的函数返回 JSX。添加 return 语句或删除函数体 {} 以使返回隐式。

class TileFeed extends Component {
render() {
const { thumbnail } = this.props;
return thumbnail.map(thumb => {
return (
<div key={thumb._id} className="row__inner">
<div className="tile">
<div className="tile__media">
<img
className="tile__img"
id="thumbnail"
src={thumb.thumbnail}
alt=""
/>
</div>
</div>
</div>
);
});
}
}

关于javascript - 组件不会渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51499726/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com