react.js组件递归调用自身出错

问题描述

问 题

一个简单的树状结构，代码如下

const data = [
    {date: '今天', time: '11:20', name: 'Matt', content: '你好', avatar: require("parc/img/matt.jpg")},
    {
        date: '今天', time: '11:20', name: 'Jenny', content: '你好', avatar: require("parc/img/molly.jpg"),
        subComment: [
            { time: '11:20',name: 'Sal', content: '你好', avatar: require("parc/img/molly.jpg")},
            { time: '11:20',name: 'Jenny', content: '你好', avatar: require("parc/img/jenny.jpg")},
            { time: '11:20',name: 'Elliot', content: '你好', avatar: require("parc/img/elliot.jpg")},
            { time: '11:20',name: 'Molly', content: '你好', avatar: require("parc/img/molly.jpg")}
        ]
    },
    {date: '今天', time: '11:20', name: 'Molly', content: '你好', avatar: require("parc/img/molly.jpg")},
    {date: '今天', time: '11:20', name: 'Elliot', content: '你好', avatar: require("parc/img/matt.jpg")},
    {date: '昨天', time: '11:20', name: 'Sal', content: '你好', avatar: require("parc/img/molly.jpg")},
    {date: '昨天', time: '11:20', name: 'Mike', content: '你好', avatar: require("parc/img/matt.jpg")},
    {date: '前天', time: '11:20', name: 'Sal', content: '你好', avatar: require("parc/img/molly.jpg")},
    {
        date: '前天', time: '11:20', name: 'Hurley', content: '你好', avatar: require("parc/img/matt.jpg"),
        subComment: [
            {
                time: '11:20',name: 'Sal', content: '你好', avatar: require("parc/img/molly.jpg"),
                subComment: [
                    {
                         time: '11:20',name: 'Sal', content: '你好', avatar: require("parc/img/molly.jpg"),
                        subComment: [
                            { time: '11:20',name: 'Molly', content: '你好', avatar: require("parc/img/molly.jpg")}
                        ]
                    },
                    { time: '11:20',name: 'Jenny', content: '你好', avatar: require("parc/img/jenny.jpg")},
                    { time: '11:20',name: 'Elliot', content: '你好', avatar: require("parc/img/elliot.jpg")},
                    { time: '11:20',name: 'Molly', content: '你好', avatar: require("parc/img/molly.jpg")}
                ]
            }
        ]
    },
    {date: '前天',  time: '11:20', name: 'Ben', content: '你好', avatar: require("parc/img/matt.jpg")},
    {date: '前天',  time: '11:20', name: 'Jane', content: '你好', avatar: require("parc/img/molly.jpg")}
];

export default data;

然后创建一个父容器组件，一个子容器组件，子容器组件负责对每一条数据进行展示，

// 父容器组件
import React, { Component } from 'react';
import ListData from './ListData';
import List from './lisr';

class listContainer extends Component {
    render() {
        let ListMap = ListData.map((e,i)=>(<List key={i} {...e}></List>))
        return (
            <ul>
                {ListMap}
            </ul>
        );
    }
}

export default listContainer;

//子容器组件
import React, { Component } from 'react';
class listInfo extends Component {
    render() {
        const {time,name,content,avatar} = this.props;
        let subLi = null;
        return (
            <li>
                <div><img src={avatar} alt="" height="20" width="20"/>{name} - {time}</div>
                <p>
                    {content}
                </p>
                <ul>
                    {this.props.subComment ? JSON.stringify(this.props.subComment) : 'e'}
                </ul>
            </li>
        );
    }
}

// {this.props.subComment ? subLi = this.props.subComment.map((e,i) => (<listInfo key={i} {...e}/>)) : 'e'}
// {this.props.subComment ? JSON.stringify(this.props.subComment) : 'e'}

export default listInfo;

当我在子容器打印数据的时候，是没有问题的，但是如果使用子容器递归调用自身去展示数据，那么就会出现如下报错

在网上寻找结果，stackoverflow上得出的结果是建议给绑定数据为data属性，于是代码修改为；

import React, { Component } from 'react';
class listInfo extends Component {
    render() {
        const {time,name,content,avatar} = this.props['data-e'];
        let subLi = null;
        return (
            <li>
                <div><img src={avatar} alt="" height="20" width="20"/>{name} - {time}</div>
                <p>
                    {content}
                </p>
                <ul>
                    {this.props['data-e'].subComment ? this.props['data-e'].subComment.map((e,i)=>(<listInfo key={i} data-e={e}></listInfo>)) : 'empty'}
                </ul>
            </li>
        );
    }
}

// {this.props.subComment ? subLi = this.props['data-e'].subComment.map((e,i) => (<listInfo key={i} data-e={e}/>)) : ''}
// {this.props.subComment ? JSON.stringify(this.props.subComment) : 'e'}

export default listInfo;

这样倒是没有报错了，但是组件自身还是渲染不出来，没有子元素的倒是可以渲染出empty字符串
很疑惑这是什么原因 - -

解决方案

直接调用子组件就行，可能是你传递数据的字段弄错了。

class listInfo extends Component {
    render() {
        const {time, name, content, avatar, subComment} = this.props;
        return (
            <li>
                <div><img src={avatar} alt="" height="20" width="20"/>{name} - {time}</div>
                <p>
                    {content}
                </p>
                <ul>
                    {
                        subComment 
                            ? subComment.map((item, i) => {
                                return <listInfo key={i} {...item}/>
                            })
                            : 'empty'
                    }
                </ul>
            </li>
        )
    }
}

这篇关于react.js组件递归调用自身出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！