Question

我是新来的反应者，我正在尝试建立一个站点来巩固我的理论知识。我正在使用Storybook尝试单独开发每个组件，并且正在尝试使用原子方法。

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

这是我的链接组件代码

//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

弄清楚了。事实证明，在List组件中，我需要在地图函数中返回item组件，而不是item.text（因为从导航组件返回的子项中没有item.text）

反应嵌套组件不渲染

1 个答案: