从json路由组件

Question

我想以这种方式生成我的路线：

错误消息：“对象无效作为React子对象（找到：具有键{contents}的对象）”。

class App extends Component {
    menu(){
        return {
            menu:[
                {id:1, text:"Dashboard", component: <Dashboard/>},
                {id:2, text:"Users", component: <Users/>},
            ]
        }
    }
    render() {
        return (
            <HashRouter>
                <Router data={this.menu()}/>
            </HashRouter>
      );
    }
};


class Router extends Component {
    render() {
        let menu = this.props.data.menu,
        contents = menu.map((elem, i) =>{
            return <Route exact
                path={"/" +elem.text.toLowerCase()}
                component={elem.component}/> //How to call the component here ?
        }, this);
        console.log(contents);
        return(
            {contents} //Error
            //<Route exact path={"/" +elem.text.toLowerCase()} render={Dashboard}/> // Works
        )
    }
};

Answer 1

我使用codesanbox.io https://codesandbox.io/s/6l9r1qwkzk

为您举个例子

似乎props.menu.data没有收到component财产。

const Router = ({ data }) => JSON.stringify(data);

和输出如下：

{"menu":[{"id":1,"text":"Dashboard"},{"id":2,"text":"Users"}]}

  

注意

您无法在json数据中实例化组件，如下所示：

{ id: 2, text: "Users", component: <Users /> }

错误是Converting circular structure to JSON

*编辑1 - 添加了我的localhost测试

奇怪的是codesandbox.io没有将组件调试为函数，因此我在本地计算机上重新构建了它

*编辑2 - 尝试使用React adopt

撰写渲染道具组件链接专业人员

参考：

• github.com - pedronauck/react-adopt

我希望我有用！ ：）