Несколько рекурсивных <tbody>в том же <table>? - PullRequest
Новая
       7

Несколько рекурсивных <tbody>в том же <table>?

0 голосов
/ 14 февраля 2019

Я хочу сделать рендеринг в виде дерева в React.У меня есть TreeNode класс, который рекурсивно делает детей.В общем, я хочу пойти так: 

class TreeNode extends React.Component {
    render() {
        let nestedLevel = this.props.level || 0;
        let childNodes = this.props.node.childNodes.map(function(node, index) {
            return <TreeNode key={index} node={node} level={nestedLevel+1} />
        });
        let identationMargin={margin: (nestedLevel*16)+"px"};
        return (
            <tr className="treeview-row">
                <td><span style={identationMargin} />User {this.props.node.name}</td>
            </tr>
            {childNodes}
        );
    }
}

Как вы уже видите, в ответ возникает ошибка, к сожалению, я должен вернуть только один элемент, например, div или около того.Но когда дело доходит до стола jsx, кажется, чувствует себя довольно плохо.Как выйти из ситуации?

Вот вопрос о множественном теле , но .. "как мы можем поместить тело в другое тело?"

Или я должен сначала заполнить массив «строк» ​​в js, а затем отобразить их в одном возвращении (во втором компоненте), например: 

class TreeView render() {
   rows=[];
   for(node of allNodes)
      rows.push(<TreeNode node={node}>);
   return (
      <table>
        <tbody>
          { rows }
...

Что является типичным общимпрактика, чтобы пойти с?

1 Ответ

0 голосов
/ 14 февраля 2019

привет, почему вы не можете обернуть два элемента в фрагмент React.Frame ??как это 

class TreeNode extends React.Component {
    render() {
        let nestedLevel = this.props.level || 0;
        let childNodes = this.props.node.childNodes.map(function(node, index) {
            return <TreeNode key={index} node={node} level={nestedLevel+1} />
        });
        let identationMargin={margin: (nestedLevel*16)+"px"};
        return (
            <React.fragment> 
                <tr className="treeview-row">
                    <td><span style={identationMargin} />User {this.props.node.name}</td>
                </tr>
                {childNodes}
            </React.fragment>
        );
    }
}
...