反应嵌套组件不呈现

Question

我是react新手，我正在尝试建立一个站点来帮助巩固我的理论知识。我正在使用故事书来尝试单独开发每个组件，并且我正在尝试使用原子方法论。

我目前有两个组件，一个 link 组件和一个列表组件。我正在尝试使用这两个组件来构建导航组件。不幸的是，我无法让它发挥作用。我可以让任何一个元素独立显示，但是当我尝试将它们一起使用时，我得到一个空列表。

这是我的link组件代码

//Link Component
import React from 'react'
import PropTypes from 'prop-types'
import './Link.scss'

const Link = (props) => {
    
    const { children, href, disabled, ...rest} = props
    return <a href={href} {...props}>{children}</a>

}

Link.propTypes = {
    children: PropTypes.node.isRequired,
    disabled: PropTypes.bool,
    href: PropTypes.string.isRequired,
}

export default Link

这是我的列表组件代码

//List Component
import React from 'react'
import PropTypes from 'prop-types'

function List(props) {
    const { children, lists:{ordered, classId }} =  props
    const ListType = ordered ? 'ol' : 'ul'

    console.log(props)

    const mapListItems = (listItems) => (
        <ListType>
            {listItems.map((item, index) => (
                <li key={item.id}>
                    {item.text}
                    { item.kids != null && item.kids.length > 0 ? mapListItems(item.kids) : "" }
                </li>
            ))}
        </ListType>
    )

    return mapListItems(children)
}

List.propTypes = {
    children: PropTypes.any,
    ordered: PropTypes.bool,
    dropdown: PropTypes.bool,
    classId: PropTypes.string,
    handleClick: PropTypes.func
}

export default List

最后，这是我的导航组件

import React from 'react'
import Link from '../../atoms/Link'
import List from '../../atoms/List'

function Navigation(props) {

    const { children, lists:{ordered, classId} } = props

    return (
        <List {...props}>
            {children.map(child => (
                <Link {...child}>
                    {child.text}
                </Link>
            ))}
        </List>
    )
}

export default Navigation

Answer 1

想通了。事实证明，在列表组件中，我需要 return 我的地图函数中的项目组件，而不是 item.text（因为 child 上没有 item.text 我是 return来自导航组件）

反应嵌套组件不呈现

React Nested Component not Rendering

reactjs

storybook