Реагировать: использовать компонент внутри другого компонента

Question

Я новичок, чтобы реагировать, поэтому я надеюсь, что вопросы не слишком глупы.

Короче говоря: я хочу использовать определенный Компонент внутри других компонентов.Но он работает не так, как хотелось бы.

Я хочу использовать Карты пользовательского интерфейса в следующем компоненте: Ссылка на репо "Просмотр материала-материала в дереве"

Для тестирования я написал следующий код:

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

В моем индексе.js Я визуализирую компонент приложения следующим образом:

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

Я надеюсь, что вы могли бы дать мне совет, где можно посмотреть.

Заранее спасибо,

coloeus

Answer 1

MuiTreeView ожидает дерево с каждым листовым узлом .value членом, который является строкой для визуализации.Он просто не поддерживает добавление пользовательских компонентов таким образом.

Вы можете увидеть, посмотрев на его prop-types

Answer 2

Не может сделать, как при проверке в исходных файлах MuiTreeView, tree prop может быть либо строкой, либо рекурсивным объектом, где значения реквизита являются строками ...

Поскольку вы используете компоненты MaterialUI, попробуйте проверить панели расширения , которые предоставляет MUI, и попробуйте получить желаемые результаты.В этом случае нет необходимости передавать ваши компоненты в качестве реквизита.