首页 > 解决方案 > React:在另一个组件中使用组件

问题描述

我是新手,所以我希望这些问题不会太愚蠢。

简而言之:我想在另一个组件道具中使用某个组件。但它并没有像预期的那样工作。

我想在以下组件 中使用Material UI Cards : Link to repo of "Material-UI Tree View"

为了测试,我编写了以下代码:

import React,{Component} from 'react';
import SplitPane from "react-split-pane";
import MuiTreeView from 'material-ui-treeview';
import Demo from './demo';


export class App extends Component {
    render() {

        const tree = [
            {
                value: 'Parent A',
                nodes: [{ value: Demo}]
            }

        ];
        return (
            <SplitPane split="vertical"  defaultSize={500} allowResize={false}>

                <div><MuiTreeView tree={tree} /></div>
                <div id="mynetwork"></div>
            </SplitPane>
        );
    }
}

进口

import Demo from './demo';

是简单卡的例子:https ://codesandbox.io/s/3vl744v6z5

在我的 index.js 中,我像这样渲染 App 组件:

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

我希望你能给我一个提示在哪里看看。

提前致谢,

结肠

标签: javascriptreactjsreact-component

解决方案


不可以,就像在MuiTreeView的源文件中检查一样,tree prop只能是一个字符串,或者递归一个props值是字符串的对象......

由于您使用的是 MaterialUI 组件,请尝试检查 MUI 提供的扩展面板并尝试获得所需的结果。在这种情况下,无需将您的组件作为道具传递。


推荐阅读