JSX не отображается - PullRequest
Новая
       4

JSX не отображается

1 голос
/ 17 июня 2020

В общем, у меня есть компонент, который берет данные из бэкэнда и создает вложенные компоненты в формате K-nary Tree.

Tree. js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import TreeNode from './TreeNode';

class Tree extends Component {
    getRootNodes = () => {
        return this.props.comments.filter(node => !node.cid_reference);
    }   

    getChildNodes = (node) => {
        let comments = this.props.comments;
        let children = comments.filter(comment => comment.cid_reference == node.cid);
        return children;
    }

    render() {
        let rootNodes = this.getRootNodes()
        return (

            <div>
                {console.log(rootNodes)}
                {
                    rootNodes.map(node => (
                        <TreeNode 
                            node={node}
                            getChildNodes={this.getChildNodes}
                        />

                    ))
                }
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        comments: Object.values(state.comment.dbComments)
    };
}

export default connect(mapStateToProps, null)(Tree);

Дерево Node.js

import React from 'react';
import { Link } from 'react-router-dom';

// Initially root nodes gets passed in
const TreeNode = (props) => {

    const { node, getChildNodes, level } = props;
    console.log(node);

    const renderComments = (level, node) => {
        let count = level;
        console.log(node)
        const helper = (node) => {
            if (count == 0) {
                console.log(count, 'returned', node)
                return node;
            } else {
                count = count - 1;
                console.log(count);
                return helper(
                    <div className="comment">
                        <div className="comments">
                            {node}
                        </div>
                    </div>
                );                  
            }
        }
        /*
            - if level=0, then <div className="comment">
            - if level=1, then <div className="comment"><div className="comments"..
                                                            <div className="comment"
        */
        helper(node);
    }



    return (
        <React.Fragment key={node.cid}>
            {renderComments(level,
                <div className="comment">
                    <div className="content">
                        <a className="author">{node.username ? node.username : "annonymous"}</a>
                        <div className="metadata">
                            <span className="date">{node.date_created}</span>
                        </div>
                        <div className="text">{node.comment}</div>
                        <div className="actions">
                            <Link to={'/streams/comments/new'} className="reply">Reply</Link>
                        </div>
                    </div>     
                </div>            
            )}
            {getChildNodes(node).map(childNode => (<TreeNode
                                                    {...props}
                                                    node={childNode}
                                                    level={level+1}
                                                    />)) 
            }        
        </React.Fragment>
    );
}

TreeNode.defaultProps = {
    level: 0,
};

export default TreeNode;

Tree.js - это его структура, и каждый компонент создается TreeNode.js. Компонент создается рекурсивно. Проблема заключается в функции renderComments. В разделе return node ничего не отображается на экран. Когда я сделал console.log(node), я увидел, что этот узел является React.Element, что, скорее всего, является причиной того, что он не отображается на экране. Однако, если я проигнорирую функцию helper и просто верну узел, комментарии будут отображаться на экране.

Кроме того, я использую Sementi c -UI для комментариев. <div className="comment>... дает мне обычный комментарий, а <div className="comment>...<div className="comments" дает мне вложенный комментарий. Я не совсем уверен, почему это не работает. Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Решено благодаря @MarcBaumbach, это была просто очень глупая ошибка с моей стороны. 

const renderComments = (level, node) => {
    let count = level;
    const helper = (node) => {
        if (count == 0) {
            return node;
        } else {
            count = count - 1;
            return helper(
                <div className="comment">
                    <div className="comments">
                        {node}
                    </div>
                </div>
            );                  
        }
    }
    return helper(node); // The line that fixed the code
}
0 голосов
/ 17 июня 2020

вы возвращаете helper, но внутри helper, поэтому на самом деле ничего не возвращается, поскольку вы не вернули внешний помощник

измените это: 

    const helper = (node) => {
        if (count == 0) {
            console.log(count, 'returned', node)
            return node;
        } else {
            count = count - 1;
            console.log(count);
            return helper(
                <div className="comment">
                    <div className="comments">
                        {node}
                    </div>
                </div>
            );                  
        }
    }

на 

    return helper = (node) => {
        if (count == 0) {
            console.log(count, 'returned', node)
            return node;
        } else {
            count = count - 1;
            console.log(count);
            return (
                <div className="comment">
                    <div className="comments">
                        {node}
                    </div>
                </div>
            );                  
        }
    }
...