【taro react】---- Warning: Invalid DOM property `contenteditable`. Did you mean `contentEditable`?

最新推荐文章于 2023-07-07 15:59:30 发布
最新推荐文章于 2023-07-07 15:59:30 发布
阅读量348 收藏
点赞数
分类专栏： Taro React 入门到实战系列 文章标签： react.js taro javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38082783/article/details/128394614
版权
本文主要介绍了在使用Taro和React开发过程中遇到的`contenteditable`属性报错问题。错误原因是React中需使用`contentEditable`而非`contenteditable`。解决方案是将属性更正为`contentEditable="true"`，并添加`suppressContentEditableWarning="true"`以避免子节点编辑警告，同时通过CSS设置`outline: 0px solid transparent;`消除获得焦点后的边框。
摘要由CSDN通过智能技术生成

1. 报错

在这里插入图片描述

2. 错误原因

Invalid DOM property `contenteditable`. Did you mean `contentEditable`?

由于在react中 contenteditable 是关键字，不能使用，只能用 contentEditable替代！！！

3. 解决办法

将 【contenteditable】 替换为 【contentEditable】！！！

4. 替换后报错

在这里插入图片描述

Warning: A component is `contentEditable` and contains &#
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Rattenking
关注
专栏目录
订阅专栏
【Warning】Invalid DOM property ‘class‘. Did you mean ‘className‘? React报错
ryling_的博客
04-26 2360
错误截图： 对应的代码： class Demo extends React.Component { render() { return ( <div> <input class="input1" type="text" /> </div> ); } } ReactDOM.render(<Demo />, document.querySelector('.test')); 问题原因： 在React中，class是一个定义类的关键
use-editable:一个小的React钩子，使用contenteditable（和magic）将元素变成完全可渲染和可编辑的内容表面，例如代码编辑器
03-19
使用可编辑 一个小的React钩子，使用contenteditable（和magic）将元素变成完全可渲染和可编辑的内容表面，例如代码编辑器 useEditable是小钩，使元件是contenteditable同时仍然完全可渲染。这是仅需2kB创建小型代码编辑器或散文textareas的理想选择！ 它旨在允许任何元素都是可编辑的，同时仍然能够向其渲染普通的React元素-无需innerHTML并且无需处理原始HTML的操作或渲染，也无需从头开始创建完整的编辑器项目。 prism-react-renderer 查看！ 用法 首先安装use-editable和react ： yarn add use-editable # or npm install --save use-editable 然后，您将能够导入useEditable并向其传递HTMLElement ref和onChange
Warning: A component is `contentEditable` and contains `children` managed by React.
qq_36198515的博客
02-09 3053
当在 react jsx中，给标签设置可编辑的属性contentEditable，页面会弹出警告 A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intent
Invalid DOM property `contenteditable`. Did you mean `contentEditable`?
兔子零
08-01 1377
Invalid DOM property contenteditable. Did you mean contentEditable? 在react中 contenteditable 是关键字 你换 contentEditable 就可以了
【React】报错：A component is `contentEditable` and contains `children` managed by React. It is now your
最新发布
qq_45677671的博客
07-07 1098
【React】报错：A component is `contentEditable` and contains `children` managed by React. It is now your
H5属性contenteditable
walle的博客
07-22 692
div的内容都可以编辑啦 http://www.w3school.com.cn/tiy/t.asp?f=html5_global_contenteditable
react-native-bluetooth-state-manager:管理设备的蓝牙状态
05-13
React本地蓝牙状态管理器 该库的唯一目的是管理蓝牙状态。 不多不少。 如果您需要进一步的功能，例如与设备连接和通信，请查看 。 特征 安装 使用 ：（推荐） yarn add react-native-bluetooth-state-manager ...
Taro-Code-In-React-Native:Taro React Native 参考样例。支持在 React Native 初始化的项目中引入 Taro 3 代码
05-09
Taro-Code-In-React-Native Taro3 与 原生 React Native 应用结合的 Demo 基本介绍 为了支持在 React Native 项目中引入 Taro3 代码，Taro提供了一种两者结合方案. 基本思路: 支持导出 Taro 默认的 Metro 配置，提供...
react-native-editable-table:在React Native中具有垂直滚动的可编辑表组件
05-15
React本地可编辑列表 在React Native中具有垂直滚动的可编辑表组件 安装 npm install react-native-editable-list --save 用法 import EditableTable from 'react-native-editable-table' ; class editabletable ...
react-simple-contenteditable:一个简单的可编辑内容
05-11
React简单，内容可编辑 一个简单的可编辑内容 为什么？ ContentEditable存在一些已知问题，此组件的目的是避免其某些问题： 为大多数浏览器启用“仅纯文本”； 防止光标跳到该字段的开头； 例子 import React , { Component } from 'react' ; import ContentEditable from 'react-simple-contenteditable' ; class App extends Component { constructor ( props ) { super ( props ) ; this . state = { title : "Title here" } this . handleChange = this . handleChange . bind ( t
React Warning: Unknown DOM property(已解决)
ljw_Josie的博客
01-18 4147
最近做的一个react单页面应用中遇到了这个问题，原因是因为在使用React中标签的属性class和for，都需要写成className和htmlFor,无论你是否使用JSX,因为两个属性是JavaScript的保留字和关键字。所以解决办法是将页面中的class换成className，for属性换成htmlFor。
Invalid DOM property `tabindex`. Did you mean `tabIndex`?
好先
03-14 1206
在 React 中，所有 DOM 属性和属性（包括事件处理程序）都应该是驼峰式。例如，HTML 属性 tabindex 对应于 React 中的属性 tabIndex。aria-* 和 data-* 属性例外，它们应该小写。例如，您可以将 aria-label 保留为 aria-label。 React 中的所有 DOM 属性都应该是驼峰式。例如， className="btn btn-primary"而不是classname=“btn btn-primary”. 在你的情况下，它应该严格tabIndex.
React中使用contentEditable光标在最前方的问题
QY_99的博客
08-24 2796
React中使用contentEditable报错，React中使用contentEditable光标在最前方的问题，dangerouslySetInnerHTML
react页面中存在多个input时巧妙设置value属性
热门推荐
baidu_38027860的博客
09-21 1万+
笔者以前是一直在用jquery进行开发的，才转react没多长时间，对别的倒是没什么感触，就是这个input输入框是深深的抵触，感觉很烦人，简单的一个输入框，你就必须要设置changeValue的方法去给input加上，这样你输入的内容才能够正确的展示到UI页面中，也因此，如果你页面中存在多个input时，简直就是噩梦了，因为你首先要为这些所有的input框绑定上onChange的方法，然后还需要...
html5新属性contenteditable 对于那些不可编辑的标签，现在都可以编辑了
weixin_30632883的博客
05-10 1181
contenteditable = true 表示该html标签的内容可以编辑，对于那些不可编辑的标签，现在都可以编辑了。 转载于:https://www.cnblogs.com/jerrypro/p/6834551.html
React可编辑DIV获取焦点的两种方式
多一份贡献,多一份环保
02-26 4225
React官方介绍可编辑Div的资料比较少，方式二在所有的资料中都没找到，是通过特殊的方法实现的。 dangerouslySetInnerHTML 是React专用的属性 &lt;div id="context" contentEditable={true} dangerouslySetInnerHTML={{__html: this.state.inputValueHtml}}&...
react children 大揭秘
fortunegrant的博客
06-04 297
https://www.jianshu.com/p/d1975493b5ea 直接转载了
taro配置react-vant
06-08
要在 Taro 中使用 React-Vant，需要进行以下步骤： 1. 安装 React-Vant 和相关依赖： ``` npm install react-vant vant -S npm install babel-plugin-import style-loader css-loader postcss-loader postcss-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rattenking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值