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

Question

我仍在学习如何将 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

阅读有关调用 props 的内容时，我是否遗漏了什么？

我将 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

我相信正在发生的事情是您将一个 Prop 传递到名为 props 的组件中，这是一个具有名为 props 属性的对象( {props: {title: "some title"}} )

如果你想得到它作为prop.title你可以像这样传播属性

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

这将传递 props 上的每个键作为 Prop 。