{Props.props.title}? Почему бы не {props.title}?

Question

Я все еще учусь, как использовать данные API с реакции и затем js. Но почему моя функция работает только тогда, когда я пишу {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 реагировать-мгновенный поиск:

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

Вот где проблема:

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

Вы должны передать это так

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

Answer 2

Я считаю, что происходит то, что вы передаете реквизит в свой компонент с именем props, который является объектом со свойством с именем props ({props: {title: "some title"}})

Если вы хотите чтобы получить значение prop.title, вы можете просто распределить свойства следующим образом:

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

, который передаст каждый ключ на props в качестве реквизита.

Answer 3

Вы передаете props как опору в вашем компоненте. Если вы хотите использовать реквизит только один раз или хотите больше его не использовать. Вы можете использовать деструктуризацию в своем компоненте testItems, например function testItems({props}) или передать title, и другие реквизиты, если таковые имеются, в компоненте Hit, например <Hit title={hit.title} key={index} />.

.