reactjs - 通过 json 动态渲染带有组件的路由答案

【问题标题】：reactjs - render route with component dynamically via jsonreactjs - 通过 json 动态渲染带有组件的路由
【发布时间】：2021-05-20 16:28:08
【问题描述】：

我是新手，通常使用 javascript。

此外，我确实有一个 json 文件，我想获取 url 值并使用该名称呈现组件。

{
  "MTs": {
    "MenuItems": {
      "Main": {
        "key": "1",
        "url": "about",
        "visible": true
      },
      "Add Status": {
        "key": "2",
        "url": "topics",
        "visible": true
      },
   }
}

我的代码：

  const [data, setData] = useState({ MTs: [] });

  useEffect(() => {
    fetch(props.role + ".json")
      .then(function (response) {
        // console.log(response);
        return response.json();
      })
      .then(function (myJson) {
        // console.log(myJson);
        setData(myJson);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);


  var url = [];
  var val = function (data) {
    for (var key in data) {
      if (data.hasOwnProperty(key)) {
        for (var title in data[key].MenuItems) {
          if (data[key].MenuItems[title].visible == true) {
            url.push(
            <Route
              path={"/"+ data[key].MenuItems[title].url}
              component={data[key].MenuItems[title].url}
            />
            );
          }
        }
      }
    }
    return url;
  };
  return <div>{val(data)}</div>;
};

它不渲染是因为它是一个数组并在组件名称中添加了双引号“”。

有什么方法或“更好的方法”可以做到这一点吗？

预期结果

<Route
  path="/about"
  component={about}
/>
<Route
  path="/topics"
  component={topics}
/>
<Route path="/datagrid" component={etc} />

【问题讨论】：

标签： javascript json reactjs components react-router-dom

【解决方案1】：

尝试将您的组件添加到这样的对象中

const Component = {
  "about": <About />,
  "topics": <Topics />
}

然后在循环中调用

&lt;Route path={"/"+ data[key].MenuItems[title].url} component={Component[data[key].MenuItems[title].url]} /&gt;

【讨论】：

嗨 Sam，问题是我无法更改 json 文件。我需要以某种方式自动从“url”获取该字符串并将其转换为我猜的对象？
首先你不需要改变json。您需要将所有动态组件添加到单独的对象中，例如 Component 变量。当您循环时，您可以使用 Component 对象根据您传递的 URL 调用组件。
嗨，山姆。我想这是我应该这样做的方式。但我没有足够的经验（ReactJS 新手）将组件添加到 json 文件中的单独对象并循环遍历它们。对代码有什么建议吗？