Рендеринг компонента внутри другого компонента

Question

У меня есть страница с компонентом боковой панели и компонентом, который возвращает список ряда служб из Firebase. Я хочу сделать так, чтобы, когда пользователь нажимал на один из результатов, листинг отображал другой компонент, где он мог видеть детали этого одного сервиса.

<div key={company.id} onClick={() => { return <CompanyDetails id={company.id} />}}>
   <div key={company.id} className="company-photo" ></div>
   <div className="company-info">
      <h2>{company.name}</h2>
      <p>Founded in {company.founded}</p>
   </div>    
</div>

Как видите, я пытаюсь вернуть компонент по клику, но он не работает. Я уже создал и импортировал компонент CompanyDetails.

Что мне не хватает?

Answer 1

Простой возврат компонента не принесет ничего интересного.

Для простого случая вам понадобится просто состояние, описывающее, что визуализировать; В общем, вы захотите использовать маршрутизатор (реакции-маршрутизатор, Reach Router, ...), чтобы сделать URL-адреса также доступными. Вот простой случай.

function CompanyList({ setShowDetail }) {
  return getCompaniesFromSomewhere().map(company => (
    <div key={company.id} onClick={() => setShowDetail(company.id)}>
      <div key={company.id} className="company-photo" />
      <div className="company-info">
        <h2>{company.name}</h2>
        <p>Founded in {company.founded}</p>
      </div>
    </div>
  ));
}

function CompanyDetails({ id }) {
  return <>Company ID {id}</>;
}

function App() {
  const [showDetail, setShowDetail] = React.useState();
  if (showDetail) {
    return <CompanyDetails id={showDetail} />;
  }
  return <CompanyList setShowDetail={setShowDetail} />;
}