关于react 循环问题,小白勿喷. 爷爷组件如何向孙子组件传值?

关于react 循环问题,小白勿喷. 爷爷组件如何向孙子组件传值?

我新建了一个循环列表的组件.代码如下:

import React, { Component } from 'react';

export default class PubContent extends Component {

constructor(props) {
    super(props);
}
render() {
    return (
        <div className="pblic_content">
            <ul>
                {
                    this.props.posts.map((post, index) => {
                        <li key={index}><a href={post.url}>{post.title}</a></li>
                    })
                }
            </ul>
        </div>
    )
}
复制代码

}

然后 又新建了一个父组件.

import React, { Component } from 'react';

import PubTitle from '../pubtitle';

import PubContent from '../pubcontent';

export default class PubBox extends Component {

constructor(props) {
    super(props);
}
render() {
    return (
        <div className="help">
            <PubTitle {...this.props} />
            <PubContent {...this.props}/>
        </div>
    )
}
复制代码

}

然后爷爷组件

import React, { Component } from 'react';

import PubBox from '../../../../components/pubbox';

export default class Main extends Component {

constructor(props) {
    super(props);
}
render() {
    const help = {
        title: '帮助中心',
        moreurl: 'http:www.baidu.com',
        lists:[
            {
                title:'中心简介1',
                url:'xxxxxxxxx'
            },
            {
                title:'中心简介2',
                url:'xxxxxxxxx'
            }
        ]
    }
    const hot={
        title: '最新数据',
        moreurl: 'http:www.baidu.com'
    }
    const publish={
        title: '数据出版',
        moreurl: 'http:www.baidu.com'
    }
    return (
        <div className="main">
            <div className="main_left"></div>
            <div className="main_center"></div>
            <div className="main_right">
                <PubBox title={help.title} moreurl={help.moreurl} posts={help.lists}/>
                <PubBox title={hot.title} moreurl={hot.moreurl} />
                <PubBox title={publish.title} moreurl={publish.moreurl} />
            </div>
        </div>
    )
}
复制代码

}

我学react的时候 记得这样写是没错的吧?为什么一直报错

求大神帮我看看..万分感激!!!

转载于:https://juejin.im/post/5ce4b8a66fb9a07ede0b1952