Javascript 如何将单击的组件显示给其他组件

我有一个使用react钩子的组件列表，现在我想单击该组件，它应该打开设置组件并显示单击的组件

下面是代码沙盒：

下面是我在app.js中显示组件列表的方式

import * as data from "./Components/CompList";
import { useHistory } from "react-router-dom";

export default function App(props) {
  let components = data.complist;
  const history = useHistory();

  return (
    <div className="App">
      {components.map(function (Component, id) {
        return (
          <div
            className="comp-list"
            key={id}
            onClick={() => {
              history.push(`/settings/${id}`);
            }}
          >
            <Component />
          </div>
        );
      })}
    </div>
  );
}

import*作为数据从“/Components/CompList”导入；
从“react router dom”导入{useHistory}；
导出默认功能应用程序（道具）{
让组件=data.complist；
const history=useHistory（）；
返回(
{components.map（函数（组件，id）{
返回(
{
history.push（`/settings/${id}`）；
}}
>
);
})}
);
}

下面是我如何在设置中显示它们

import * as data from "./CompList";
import { useRouteMatch } from "react-router-dom";

const Settings = () => {
  const match = useRouteMatch();
  const { templateId } = match.params;
  let templates = data.complist;

  let SelecteComponent = templates.map(function (Component, idx) {
    if (idx === Number(templateId)) {
      return Component;
    }
    return Component;
  });
  console.log("selected", SelecteComponent);
  return (
    <div className="selected-component">
      <SelecteComponent />
    </div>
  );
};

export default Settings;

import*作为数据从“/CompList”；
从“react router dom”导入{useRouteMatch}；
常量设置=（）=>{
const match=useRouteMatch（）；
const{templateId}=match.params；
让templates=data.complist；
让我们选择组件=templates.map（函数（组件，idx）{
if（idx==Number（templateId））{
返回组件；
}
返回组件；
});
console.log（“selected”，SelecteComponent）；
返回(
);
};
导出默认设置；

不幸的是，它没有在设置组件中显示单击的组件

---

我需要更改什么来解决问题？

您可能从未在

Settings.js

上看到您的

控制台.log

语句，因为根目录从未运行过

Settings.js

您的基本示例必须考虑以下内容：

const BasicExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" render={() => <App />} />
        {/* here I use the `:templateId` to say to react-router than some params muse be inside the route, and the syntaxe `component={Settings}` is better than `render={...}` */}
        <Route exact path="/settings/:templateId" component={Settings} />
      </div>
    </Router>
  );
};

并且您的函数必须是

数组。find（）

才能只有一个元素作为结果：

让我们选择组件=模板。查找（函数（组件，idx）{
if（idx==Number（templateId））{
返回true；
}
返回false；
});

---

您可能从未在

Settings.js

上看到您的

console.log

语句，因为根目录从未运行过

Settings.js

您的基本示例必须考虑以下内容：

const BasicExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" render={() => <App />} />
        {/* here I use the `:templateId` to say to react-router than some params muse be inside the route, and the syntaxe `component={Settings}` is better than `render={...}` */}
        <Route exact path="/settings/:templateId" component={Settings} />
      </div>
    </Router>
  );
};

并且您的函数必须是

数组。find（）

才能只有一个元素作为结果：

让我们选择组件=模板。查找（函数（组件，idx）{
if（idx==Number（templateId））{
返回true；
}
返回false；
});

更新的代码：（在您的代码沙盒游戏场中测试）

组件/A.js

import React from "react";

const A = () => {
  return (
    <div className="table-1">
      <h1>Table one</h1>
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default A;

组件/设置

import React from "react";
import * as data from "./CompList";
import { useRouteMatch } from "react-router-dom";

const Settings = () => {
  const match = useRouteMatch();
  const { templateId } = match.params;
  let templates = data.complist;

  let SelecteComponent = templates.find(t => t.id === templateId)
  return (
    <div className="selected-component">
      <SelecteComponent.Component />
    </div>
  );
};

export default Settings;

从“React”导入React；
将*作为数据从“/CompList”导入；
从“react router dom”导入{useRouteMatch}；
常量设置=（）=>{
const match=useRouteMatch（）；
const{templateId}=match.params；
让templates=data.complist；
让我们选择Component=templates.find（t=>t.id==templateId）
返回(
);
};
导出默认设置；

App.js

import React from "react";
import "./styles.css";
import * as data from "./Components/CompList";
import { useHistory } from "react-router-dom";

export default function App(props) {
  let components = data.complist;
  const history = useHistory();

  return (
    <div className="App">
      {components.map(function ({Component, id}) {
        return (
          <div
            className="comp-list"
            key={id}
            onClick={() => {
              history.push(`/settings/${id}`);
            }}
          >
            <Component />
          </div>
        );
      })}
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
从“/Components/CompList”导入*作为数据；
从“react router dom”导入{useHistory}；
导出默认功能应用程序（道具）{
让组件=data.complist；
const history=useHistory（）；
返回(
{components.map（函数（{Component，id}）{
返回(
{
history.push（`/settings/${id}`）；
}}
>
);
})}
);
}

index.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import App from "./App";
import Settings from "./Components/Settings";

const BasicExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" render={() => <App />} />
        <Route exact path="/settings/:templateId" render={() => <Settings />} />
      </div>
    </Router>
  );
};

render(<BasicExample />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“/App”导入应用程序；
从“/Components/Settings”导入设置；
常量基本示例=（）=>{
返回(


家



} />
} />
);
};
render（，document.getElementById（“根”））；

更新的代码：（在您的codesandbox游乐场中测试）

组件/A.js

import React from "react";

const A = () => {
  return (
    <div className="table-1">
      <h1>Table one</h1>
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default A;

组件/设置

import React from "react";
import * as data from "./CompList";
import { useRouteMatch } from "react-router-dom";

const Settings = () => {
  const match = useRouteMatch();
  const { templateId } = match.params;
  let templates = data.complist;

  let SelecteComponent = templates.find(t => t.id === templateId)
  return (
    <div className="selected-component">
      <SelecteComponent.Component />
    </div>
  );
};

export default Settings;

从“React”导入React；
将*作为数据从“/CompList”导入；
从“react router dom”导入{useRouteMatch}；
常量设置=（）=>{
const match=useRouteMatch（）；
const{templateId}=match.params；
让templates=data.complist；
让我们选择Component=templates.find（t=>t.id==templateId）
返回(
);
};
导出默认设置；

App.js

import React from "react";
import "./styles.css";
import * as data from "./Components/CompList";
import { useHistory } from "react-router-dom";

export default function App(props) {
  let components = data.complist;
  const history = useHistory();

  return (
    <div className="App">
      {components.map(function ({Component, id}) {
        return (
          <div
            className="comp-list"
            key={id}
            onClick={() => {
              history.push(`/settings/${id}`);
            }}
          >
            <Component />
          </div>
        );
      })}
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
从“/Components/CompList”导入*作为数据；
从“react router dom”导入{useHistory}；
导出默认功能应用程序（道具）{
让组件=data.complist；
const history=useHistory（）；
返回(
{components.map（函数（{Component，id}）{
返回(
{
history.push（`/settings/${id}`）；
}}
>
);
})}
);
}

index.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import App from "./App";
import Settings from "./Components/Settings";

const BasicExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" render={() => <App />} />
        <Route exact path="/settings/:templateId" render={() => <Settings />} />
      </div>
    </Router>
  );
};

render(<BasicExample />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“/App”导入应用程序；
从“/Components/Settings”导入设置；
常量基本示例=（）=>{
返回(


家



} />
} />
);
};
render（，document.getElementById（“根”））；

export const Complist=[{Component:A，ID:'A'}，{Component:B，ID:'B'}]最好使用显式ID而不是索引最好使用显式ID而不是索引，如下面的

导出常量Complist=[{Component:A，ID'A'}，{Component:B，ID'B'}]