JSX 没有被渲染答案

【问题标题】：JSX not being renderedJSX 没有被渲染
【发布时间】：2020-06-17 04:40:01
【问题描述】：

所以基本上，我有一个组件从后端获取数据并以 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);

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;

Tree.js 是它的结构，每个组件都是由TreeNode.js 创建的。组件是递归创建的。问题在于renderComments 函数。在return node 部分中，没有任何内容呈现到屏幕上。当我执行console.log(node) 时，我看到该节点是一个 React.Element，这很可能是它没有被呈现到屏幕上的原因。但是，如果我忽略 helper 函数并仅返回节点，则 cmets 会呈现到屏幕上。

顺便说一句，我正在为 cmets 使用 Sementic-UI。 <div className="comment>... 给我常规评论，而<div className="comment>...<div className="comments" 给我一个嵌套评论。我不太确定为什么这不起作用。任何帮助将不胜感激。

【问题讨论】：

renderComments 中没有顶级return。也许return helper(node);？
@MarcBaumbach 感谢您的回复！我有return helper(node)，它在 if 语句中。该函数是递归函数，使用辅助函数来处理递归。递归部分构建嵌套注释，一旦达到基本情况，它就会返回完全嵌套的注释。
在上面发布的代码中，helper(node); 位于 renderComments 函数的最后，当调用 renderComments 时它不会返回任何内容。我认为它应该是 return helper(node); if 语句中的 return 用于返回递归调用，但在 renderComments 底部对 helper 的顶级调用永远不会返回，因此 renderComments 将返回 @987654342 @ 并且不渲染任何东西。
@MarcBaumbach 哇，你真是个救世主……谢谢！！！！

标签： javascript reactjs redux

【解决方案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>
            );                  
        }
    }

【讨论】：

【解决方案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
}

【讨论】：