首页 > 解决方案 > {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>
  )
};

标签: javascriptreactjsnext.jsreact-props

解决方案


这就是问题所在

<Hits props={hit} key={index} />

你应该这样通过

<Hits hit={hit} key={index} />

推荐阅读