{props.props.title}？为什么不是{props.title}？

Question

我还在学习如何在react和nextjs中使用API数据。但是，为什么我的函数只在我写{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>
  )
};

Answer 1

我相信您正在向组件传递一个名为props的道具，它是一个具有名为props ({props: {title: "some title"}})属性的对象。

如果你想以prop.title的形式获得它，你可以像这样扩展属性

<Hit {...hit}, key={index} />

它会将props上的每个键作为一个道具传递进来。

Answer 2

这就是问题所在。

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

你应该像这样传球

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

Answer 3

您正在将props作为一个道具传递到组件中。如果你只想使用道具一次，或者不想再使用它。您可以在function testItems({props})等testItems组件中使用解构，或者在<Hit title={hit.title} key={index} />等Hit组件中传递title和其他属性(如果有的话)。