Javascript 在React中动态创建要为React路由器dom使用的函数

我一直在尝试整理如何动态创建函数，同时尝试按照这里的第一个示例自学

我已经整理好了如何创建路由器和交换机的东西，但是我不知道如何创建示例末尾的支持函数

我尝试的是：

makeFunctions() {
    const { charList } = this.state;
    charList.map(char =>
        char.name.split(" ")[0] = function instance(){
            return <h2>{char.name.split(" ")[0]}</h2>;
        }    
    )
}

我正在使用星球大战API swapi.dev

假设char.name.split[0]是卢克、莱娅、欧比万之类的东西

我需要制作的是：

function Luke() {
    return <h2>Luke</h2>;
  }
function Leia() {
    return <h2>Leia</h2>;
  }
function Obi-wan() {
    return <h2>Obi-wan</h2>;
  }

…来完成我下面的例子。我接近了吗？我要走几英里吗？这是可能的还是简单的只是错误的方法？任何方向都非常感谢

谢谢

回答下面突然出现的问题。我真的不太理解React或Router，我在这里有点胡扯。我从上面的链接中看到的具体示例如下：

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

---

我已经从swapi.dev获取的charList动态呈现了App{}内部的所有内容，但是我不知道如何在最后使支持函数工作，因为示例中的支持函数遵循路由器链接和交换机路由语句的命名。

我无法准确理解您的需要，但是如果你想动态地创建一些函数，你可以在一个对象中对它们进行分组

//假设你有这个数组 const Starwarschracters=[Lia，Luke，随便什么]； //我们现在可以声明一个空对象 常量starWarsFunctions={} //然后我们用这种方法创建函数 starwarschracters.mapel=>starwarsffunctions[el]=函数{return el} //然后我们可以这样调用函数 console.logstarWarsFunctions.Lia

---

console.logstarWarsFunctions.Luke我想这里有一种方法

window[char.name.split(" ")[0]] = function () { // your code }

然后你可以直接打电话给他们

window['Luke']();

尽管我建议使用单个函数并将char名称作为param传递，即

let charNameHeader = function (name) {
  return `<h2>${name}</h2>`;
}

---

当你说函数时，你的意思是你真的希望每个角色都有一条路径吗？我想我们应该从你最终想要完成的事情开始，也许可以理解你开始走的路。一般来说，函数需要提前定义记住，这在技术上是一个网页，所以代码是提取的。所以你想动态创建函数吗？我想构造函数是实现这一点的方法——但是为什么你要这么做呢？为什么要加载单独的函数，当它出现时，您可以使用一个名称作为参数的函数？谢谢@DrewReese！我更新了问题，希望能更清楚。谢谢@RobinZigmond！当我做出反应时，我是绿色的。如果这是一种愚蠢的方式，我洗耳恭听；-你能解释一下你的意思吗？@fbonds66我想你可以使用一个组件来处理所有字符，在该组件中，你可以检查路由器参数以获得名称。。。