反应过来了未知的道具

我想尝试的反应，我把它们分成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

来源

2017-07-03 Celdric Kang

[Html不能在浏览器中渲染 - React js]（https://stackoverflow.com/questions/42110144/html-is-not-rendering-in-the-browser-react-js）使用'RenderItems'而不是'renderItems'。 –

我想你应该重命名renderItems到RenderItems。我看到this，它看起来像JSX你需要把大写字母你的组件名称的第一个字：

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

来源

2017-07-03 07:04:18 samAlvin

而不是复制和粘贴答案，标记答案为重复:) –

@MayankShukla啊我明白了，谢谢你的洞察力。但如果OP不知道原因是字母大小写呢？由于在源答案的链接中，问题的标题是“ReactJS组件名称必须以大写字母开头？” （OP似乎知道原因），而在这里OP不知道原因。我们不应该为这个原因提供一些答案吗？或者我们应该将其标记为重复？ – samAlvin

在评论中提到，*代替'abc'使用'Abc'来检查这个答案的更多细节*，因为这个答案很好地解释了这个问题:) –

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

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

此外，小写字母组成的名字，现在不赞成这样renderItems应该叫RenderItems。

来源

2017-07-03 07:05:27

OP's代码是正确的，这会抛出错误，你不会在'{}'里面返回任何东西。 –

反应过来了未知的道具

回答

相关问题