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>

如您所见，我正在尝试返回组件onClick，但是它不起作用。我已经创建并导入了CompanyDetails组件。

我想念什么？

Answer 1

仅仅返回一个组件不会有任何作用。

在一个简单的情况下，您只需要具有描述渲染内容的状态即可；通常，您将需要使用路由器（反应路由器，到达路由器等）来使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} />;
}

在另一个组件内部渲染一个组件

1 个答案: