Element type is invalid: expected a string (for built-in components)
-
react 项目写了一个组件render的时候报这个错误
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
源代码
let ListCom = new class extends React.Component { state = { dataSource: [] } // 获取列表接口 async getList() { console.log('getList') let res = await axios.post(config.common.media) this.setState({ dataSource: res.mediaLibrary || [] }) console.log(this.dataSource, 'res') } render() { return (<List style={{ height: '364px' }} grid={{ gutter: 16, column: 4 }} dataSource={this.state.dataSource} renderItem={item => (<List.Item> <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/> </List.Item>)}/>) } }
-
这种写法无法直接用,render函数里面的标签应该是一个还未初始化的实例,而你的这个ListCom 已经被你实例化了,所以应该是要传入一个还没实例化的代码才行,改写成这种形式看看
class ListCom extends React.Component { state = { dataSource: [] } // 获取列表接口 async getList() { console.log('getList') let res = await axios.post(config.common.media) this.setState({ dataSource: res.mediaLibrary || [] }) console.log(this.dataSource, 'res') } render() { return (<List style={{ height: '364px' }} grid={{ gutter: 16, column: 4 }} dataSource={this.state.dataSource} renderItem={item => (<List.Item> <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/> </List.Item>)}/>) } } // 在其它组件的render函数内嵌入 class App extends React.Component { render() { return (<ListCom></ListCom>) } }
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏