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

朴灿烈づ我的快乐病毒、 2022-01-12 04:49 194阅读 0赞

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

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