我是react的初学者,我正在使用https://jscomplete.com/repl.
中的一个示例
到目前为止,我的代码如下所示:
let data = [
{
name:"Paul O’Shannessy",
avatar_url:"https://avatars1.githubusercontent.com/u/8445?v=4",
company_name:"Facebook"
},
{
name:"Tom Preston-Werner",
avatar_url:"https://avatars0.githubusercontent.com/u/1?v=4",
company_name:"Facebook"
}
];
const Card = (props) => {
return (
<div style={{margin:'1em'}}>
<img width="75" src={props.avatar_url} />
<div className="info" style={{display: 'inline-block',marginLeft: 10}}>
<div style={{fontSize: '1.25em',fontWeight: 'bold'}}>{props.name}</div>
<div>{props.company_name}</div>
</div>
</div>
);
}
const CardList = (props) => {
return (
<div>
{props.cards.map((card) => <Card {...card}/>)}
</div>
);
}
class Form extends React.component {
render() {
return (
<form>
<input type="text" placeholder="Github Username" />
<button type="submit">Add Card</button>
</form>
);
};
}
class App extends React.component {
render() {
return (
<div>
<Form />
<CardList cards={data} />
</div>
);
};
}
ReactDOM.render(<App />,mountNode);
但是每次我运行的时候,我总是得到这个运行时错误。我做错了什么?
5条答案
按热度按时间bxgwgixi1#
应该是
React.Component
而不是React.component
注意大写字母。
tzxcd3kk2#
当您导入React时,请尝试使用
React.Component
,而不要使用React.Component()
。删除这些括号,则此错误将消失。或者你可以试试这个。
bttbmeg03#
在我的例子中,以下是失败的:
我的索引是这样的:
我可以通过指定导入的完整路径来解决此问题:
错误似乎与Webpack有关
svdrlsy44#
在我的情况下,这是套接字版本的问题,所以我这样做,以解决我的问题
bvjxkvbb5#
可能与此情况特别无关,但我一直在从
react-css-modules
升级到babel-plugin-react-css-modules
,并得到这个相同的错误。结果是我配置的
postcss-scss
语法,明确需要postcss@8
定义为我的package.json
中的一个依赖项,(值得一提的是,对于像stylelint-config-standard-scss
这样的库来说似乎也是一个错误),所以:解决了我的问题。