is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
react的子组件中：
class todoListUI extends Component {constructor(props) {super(props);this.state = {}}render() {return (<div style={{ margin: '15px' }}><Input placeholder={this.props.InputValue}style={{ width: '250px', marginRight: '15px' }}onChange={this.props.changeInputValue} /><Button onClick={this.addItem} type="primary">增加</Button><div style={{ width: '300px', margin: '10px' }}><List bordereddataSource={this.state.data}renderItem={(item, index) => (<List.Item onClick={(index) => { this.props.deleteItem(index) }}>{item}</List.Item>)} /></div></div>);}
}
react的父组件中：
import todoListUI from './todoListUI'
...render() {return (<todoListUI InputValue={this.state.InputValue} changeInputValue={this.changeInputValue} addItem = {this.addItem} deleteItem={this.deleteItem} />);}
报错原因：子组件在构造函数中与向外暴露时首字母一定要大写，父组件的render中引入组件即可
is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.相关推荐
- Warning: ＜twoCpt /＞ is using incorrect casing. Use PascalCase for React components, or lowercase for
报错原因:首字母要大写 改成:
- react .jsx文件报错＜xxx/＞is using incorrect casing
.jsx文件报错:is using incorrect casing 一.问题 二.解决方法及错误原因 三.总结 一.问题 问题描述:使用webpack构建react项目成功后,页面无法正常渲染,浏览 ...
- React Elements vs React Components
简单地说,一个React Elements 描述了你想在屏幕上看到什么. 不是简单的说,一个React Elements 是一些UI的对象表示. 一个React Components 是一个函数或一个 ...
- React中文文档之Rendering Elements
Rendering Elements - 渲染元素 元素是React应用的最小构建块 一个元素描述了你想要在屏幕上看到的内容: const element = <h1>Hello, wor ...
- React——Components
1.1 创建项目 创建项目box-app: create-react-app box-app cd box-app npm start 安装bootstrap库: npm i bootstrap bo ...
- 解决react报错：Adjacent JSX elements must be wrapped in an enclosing tag. Did you want....
这是因为react的组件中只能有一个根标签,类似vue的template只能有一个根标签
- Error:The above error occurred in one of your React components及A component suspended while respondi
路由组件的lazyLoad,懒加载问题,当使用通过React的lazy函数配合import()函数动态加载路由组件. import React, { Component, lazy } from 'r ...
- react内联样式_React样式化的组件：内联样式+ 3种其他CSS样式化方法（带有示例）...
react内联样式 There's no one right way to style your React components. It all depends on how complex you ...
- 如何使用Redux-saga和ReactDnD测试React和Redux（哇！）
by Gregory Beaver 通过格雷戈里·海狸 如何使用Redux-saga和ReactDnD测试React和Redux(哇!) (How to test React and Redux wi ...
最新文章
- 图灵访谈：柳泽大辅谈如何想出好创意
- visual studio C语言指针提示：使用未初始化的内存xx
- 自己动手之使用反射和泛型，动态读取XML创建类实例并赋值
- C++虚继承(五) --- 虚拟继承的概念
- 百度的索引真的比雅虎多么？
- 关于华硕主板“USB Devices Over Current Status Detected!”
- 爬虫的增量式抓取和数据更新
- kotlin中判断字符串_Kotlin程序删除字符串中所有出现的字符
- 正则表达式超级生成工具 Regulator
- ASP.NET2.0快速入门－－高级数据方案（3）
- 新iPhone有望再迎大变化：终于要用Type-C接口了？
- day_05 显示字符A
- 关于艾宾浩斯曲线的一点思考
- unicode什么意思中文_请问Unicode中文，日文，韩文，西欧语言等的编码区间是什么？...
- dsniff嗅探工具
- UISlider滑条
- android 键盘使用教程,用鼠标键盘控制你的Android手机完整图文教程
- Windows环境下修改redis默认端口和密码，以及启动方式
- 【Java基础】Java基础题
- 31年前的Beyond演唱会，是如何超清修复的？