Javascript 使用动态字符串键React中存储在记录中的渲染组件

这是一个很容易解决的问题，但我想知道这是否可能。是否可以通过使用动态键访问对象来渲染React组件

尝试下面的方法表明，JSX中的预期方法是无效语法。我知道我可以将活动对象存储在状态的映射中，或者有条件地映射对象条目，但是我似乎找不到任何与此相关的问题，并且希望看看是否有人对此有任何经验

谢谢你的帮助

以下是我的设置：

import React, { useState } from "react"
import {ComponentOne, ComponentTwo, ComponentThree} from "../directory"

const map = {
  k1 = { name="Component 1", child=ComponentOne }
  k2 = { name="Component 2", child=ComponentTwo }
  k3 = { name="Component 3", child=ComponentThree }
}

const myComponent = () => {

  const [active, setActive] = useState("k1")

  return (
    <>
      <div>
        {
          Object.entries(map).map(([k, v]) => 
            <h1 onClick={() => setActive(k)}>{ v.name }</h1>
          )
        }
      </div>
      <div>
        < map[active].child />
      </div>
    <>
  )
}

import React，{useState}来自“React”
从“./目录”导入{ComponentOne，ComponentTwo，ComponentThree}
常数映射={
k1={name=“Component 1”，child=ComponentOne}
k2={name=“Component 2”，child=ComponentTwo}
k3={name=“Component 3”，child=ComponentThree}
}
常量myComponent=（）=>{
const[active，setActive]=useState（“k1”）
返回(
{
Object.entries（map.map）（[k，v]）=>
setActive（k）}>{v.name}
)
}

)
}

最后，所有组件都是函数或类，您可以获得对它们的引用，从而通过任何对象动态访问它们

JSX只是调用该函数的唯一语法。因此，首先获取对React组件的引用，然后使用JSX呈现该组件

解决方案代码：

import React, { useState } from "react";
import { ComponentOne, ComponentTwo, ComponentThree } from "../directory";

const map = {
  k1: { name: "Component 1", child: ComponentOne },
  k2: { name: "Component 2", child: ComponentTwo },
  k3: { name: "Component 3", child: ComponentThree },
};

const myComponent = () => {
  const [active, setActive] = useState("k1");

  // Store the reference to the component you want to render in a variable
  const ActiveChild = map[active].child;

  return (
    <React.Fragment>
      <div>
        {Object.entries(map).map(([k, v]) => (
          <h1 onClick={() => setActive(k)}>{v.name}</h1>
        ))}
      </div>
      <div>
        {/* Since the variable holds reference to a React component, you can render it JSX syntax */}
        <ActiveChild />
      </div>
    </React.Fragment>
  );
};

import React，{useState}来自“React”；
从“./目录”导入{ComponentOne，ComponentTwo，ComponentThree}；
常数映射={
k1:{name:“组件1”，子级：ComponentOne}，
k2:{name:“组件2”，子级：ComponentTwo}，
k3:{name:“Component 3”，child:ComponentThree}，
};
常量myComponent=（）=>{
const[active，setActive]=useState（“k1”）；
//将对要渲染的组件的引用存储在变量中
const ActiveChild=map[active].child；
返回(
{Object.entries（map.map）（[k，v]）=>(
setActive（k）}>{v.name}
))}
{/*由于变量包含对React组件的引用，因此可以将其呈现为JSX语法*/}
);
};

最后，所有组件都是函数或类，您可以获得对它们的引用，从而通过任何对象动态访问它们

JSX只是调用该函数的唯一语法。因此，首先获取对React组件的引用，然后使用JSX呈现该组件

解决方案代码：

import React, { useState } from "react";
import { ComponentOne, ComponentTwo, ComponentThree } from "../directory";

const map = {
  k1: { name: "Component 1", child: ComponentOne },
  k2: { name: "Component 2", child: ComponentTwo },
  k3: { name: "Component 3", child: ComponentThree },
};

const myComponent = () => {
  const [active, setActive] = useState("k1");

  // Store the reference to the component you want to render in a variable
  const ActiveChild = map[active].child;

  return (
    <React.Fragment>
      <div>
        {Object.entries(map).map(([k, v]) => (
          <h1 onClick={() => setActive(k)}>{v.name}</h1>
        ))}
      </div>
      <div>
        {/* Since the variable holds reference to a React component, you can render it JSX syntax */}
        <ActiveChild />
      </div>
    </React.Fragment>
  );
};

import React，{useState}来自“React”；
从“./目录”导入{ComponentOne，ComponentTwo，ComponentThree}；
常数映射={
k1:{name:“组件1”，子级：ComponentOne}，
k2:{name:“组件2”，子级：ComponentTwo}，
k3:{name:“Component 3”，child:ComponentThree}，
};
常量myComponent=（）=>{
const[active，setActive]=useState（“k1”）；
//将对要渲染的组件的引用存储在变量中
const ActiveChild=map[active].child；
返回(
{Object.entries（map.map）（[k，v]）=>(
setActive（k）}>{v.name}
))}
{/*由于变量包含对React组件的引用，因此可以将其呈现为JSX语法*/}
);
};

这是否回答了您的问题？这回答了你的问题吗？谢谢-我被渲染中的语法迷住了，以至于完全忘记了声明变量的组件的其余部分。谢谢-我被渲染中的语法迷住了，以至于完全忘记了声明变量的组件的其余部分。