JSX 沒有被渲染

Question

所以基本上，我有一個組件從后端獲取數據並以 K-nary 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); 

樹節點.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 function。 在return node部分中，沒有任何內容呈現到屏幕上。 當我執行console.log(node)時，我看到該節點是一個 React.Element，這很可能是它沒有被呈現到屏幕上的原因。 但是，如果我忽略helper程序 function 並僅返回節點，則評論將呈現到屏幕上。

順便說一句，我正在使用 Sementic-UI 進行評論。 <div className="comment>...給我常規評論，而<div className="comment>...<div className="comments"給我一個嵌套評論。 我不太確定為什么這不起作用。 任何幫助將不勝感激。

Answer 1

您返回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>
            );                  
        }
    } 

Answer 2

感謝@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
}