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

Question

我是新来的反应，通常在 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} /> 

标签： javascriptjsonreactjscomponentsreact-router-dom

Answer 1

试试这个将你的组件添加到这样的对象中

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

然后在循环中调用

<Route path={"/"+ data[key].MenuItems[title].url} component={Component[data[key].MenuItems[title].url]} />