JSX 没有被渲染

Question

So basically, I have a component that takes data from the backend and creates nested components in a K-nary Tree format.

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); 

TreeNode.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;

The Tree.js is the structure of it and each component is created by TreeNode.js . The component gets created recursively. The problem lies in the renderComments function. In the section, return node , nothing gets rendered to the screen. When I did a console.log(node) I see that node is a React.Element which is most likely why it's not being rendered to the screen. However, if I ignore the helper function and just return node, the comments get rendered to the screen.

As an aside, I am using Sementic-UI for the comments. <div className="comment>... gives me the regular comment while <div className="comment>...<div className="comments" gives me a nested comment. I'm not too sure why this doesn't work. Any help would be greatly appreciated.

Answer 1

you return helper but inside helper so actually nothing is returned as you didn't return outer helper

change this:

    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>
            );                  
        }
    }

to be

    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>
            );                  
        }
    } 

Answer 2

Solved thanks to @MarcBaumbach, it was just very silly mistake on my part.

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
}