javascript - {props.props.title}?为什么不 {props.title}?
问题描述
我仍在学习如何将 API 数据与 react 和 nextjs 一起使用。但是,为什么我的函数只在我写的时候才起作用,{props.props.title}
而不是我所期望的{props.title}
?
代码:
function testItems(props) {
console.log(props)
return (
<div className="col-md-6 d-flex align-items-stretch">
<div className="card">
<div className="card-body">
<h1 className="card-title">{props.props.title}</h1>
</div>
</div>
</div>
)
}
export default testItems
在阅读有关调用道具的信息时我错过了什么吗?
我将 testItems 称为对 algolia react-instantsearch 的打击:
const InfiniteHits = ( {hits, refineNext, hasMore} ) => {
return(
<div className="row">
{hits.map((hit, index) => (
<Hits props={hit} key={index} />
))}
{hasMore &&
<button className="ais-InfiniteHits-loadMore" onClick={refineNext}>Show more</button>
}
</div>
)
};
解决方案
这就是问题所在
<Hits props={hit} key={index} />
你应该这样通过
<Hits hit={hit} key={index} />
推荐阅读
- varnish-vcl - 使用 IP 地址(和端口)
- php - 商店软件安装在配置步骤停止
- php - 在 Windows 上无法识别 PHP 扩展(使用 PHP 7.4)
- microsoft-graph-sdks - GraphServiceClient : No data can be read from the transmission connection: 现有连接已被远程主机关闭
- java - java电报AbilityBot库错误处理
- jsonschema - csv 文件的蛇形样本验证模式
- google-apps-script - 如何使用日历应用程序获取工作地点?
- java - 在 Flux 中使用 Mono 结果
- python - 如何用空格分割字符串的字符,然后用特殊字符和数字分割列表的结果元素,然后再次加入它们?
- laravel - Laravel:如何检查 web.php 中的嵌套类别 url?