Question

我想在反应中尝试无状态组件，我将它们拆分为2，但我收到错误Warning: Unknown props项on <renderItems> tag

我的代码在下面出了什么问题？

import Items from './Items'
import Infinite from 'react-infinite'

const LeftPanel = (props) => {
    return(
        <div className="leftPanel">
            <renderItems {...props} />
        </div>
    )
}

const renderItems = (props) => (
    <Infinite containerHeight={200} elementHeight={118}>
        {map(props.items, (item, index) => (
            <Items 
                index={index}
                item={item} 
            />
        ))}
    </Infinite>
)

export default LeftPanel

Answer 1

我认为您应该将renderItems重命名为RenderItems。我看到this看起来好像在JSX中你需要在组件名称的第一个单词上加上大写字母：

<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)

Answer 2

您的代码中存在语法错误。您在功能组件中使用括号而不是花括号。

const renderItems = (props) => {
    return (<Infinite containerHeight={200} elementHeight={118}>
        {map(props.items, (item, index) => (
            <Items 
                index={index}
                item={item} 
            />
        ))}
    </Infinite>);
}

此外，现在不推荐使用小写组件名称，因此应将renderItems称为RenderItems。

反应得到了未知道具的错误

2 个答案: