<center>使用React过程中的那些坑</center>

React开发常见问题与解决方案
本文总结了在使用React框架进行项目开发时遇到的各种bug及其解决办法,包括Module未找到、props错误、setState不当使用、组件引入问题等,旨在帮助开发者快速定位并解决问题。

在使用react两年过程中,遇到了各种坑

在使用React框架开发项目的过程中,遇到各种各样的bug,每次定位bug查找原因都花了不少时间,并且遇到相同bug的概率特别大,就把bug产生原因和解决方法做一个持续的记录。

Module not found: Error: Cannot resolve module 'react/lib/ReactMount' 

凡是Module没有找到,那就是因为没有这个模块,重装npm包或者看看是否因为升级而取消了某个包

Unknown props `visible`, `onCancel`, `onCreate` on <locCreateForm> tag. 

这个错误是标签写错了,因为没有大写 ,一般报这个错误不是因为标签写错了就是因为属性写错了

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's 
constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern,
but can be moved to `componentWillMount`.

<span onClick={()=>{this.showModifyModal(value)}}>修改
在span的onClick事件中 我使用showModifyModal函数并向其中传参 会报错
但是如上包裹一层便可以解决

Super expression must either be null or a function, not undefined

import引入组件的时候
路径错误或者使用{}的方式引入一个组件

Cannot read property '_currentElement' of null

如果state里面没有赋予初始值 在render函数里面读不到

You should not use <Route component> and <Route children> in the same route

http://www.cnblogs.com/sylarmeng/p/6920903.html

This git repository has untracked files or uncommitted changes

当我想使用 npm run eject时 报这个错 这时git add 再commit和push

create-react-app项目添加less配置
https://segmentfault.com/a/1190000010162614

Element from loaders list should have 'loader' or 'loaders' with sass-loader webpack

这个属于在webpack中配置less失败,需要正确的配置less

Error: `output.path` needs to be an absolute path or `/`.
启动 webpack-dev-server 时报错,在 webpack.config.js 里修改 output.path
var path = require('path');
output: {
path: path.join(__dirname, './dist/'),
filename: 'js/[name].js'
}

是用BrowserRouter还是HashRouter

react-router4的文档用的是BrowserRouter,照着文档的demo写,发现第一次路由过去的路径能正常显示,再刷新页面就发现说找不到路径了,这就纳闷了,不知道哪里出了问题。后来得知BroswerRouter是需要服务端配合的,服务端重定向到首页,BrowserRouter是基于html5的pushState和replaceState的,很多浏览器不支持,存在兼容性问题。故最后选择HashRouter

/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, { Component } from 'react'; import { SafeAreaView, StyleSheet, StatusBar, } from 'react-native'; import { Provider } from 'react-redux' import configureStore from './src/store/ConfigureStore'; const store = configureStore(); import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import router from './src/router/index'; import SQLite from './src/api/SQLite'; import { LogInfo, LogException } from './src/api/Logger'; const AppNavigator = createStackNavigator( router, { initialRouteName: 'Login', headerMode: 'none' } ); const AppContainer = createAppContainer(AppNavigator); export default class App extends Component { componentDidMount() { //清空缓存数据 var sqLite = new SQLite(); sqLite.clean_DBData(); //暂时停用此功能,在局域网内比较麻烦 // BackgroundJob.cancelAll(); // LogInfo('后台任务被清除!', ''); //初始化全局参数 //开始判断程序更新 } render() { return Platform.OS === "ios" ? ( <> <Provider store={store}> <StatusBar barStyle="dark-content" /> <SafeAreaView style={{ flex: 1 }}> <AppContainer /> </SafeAreaView> </Provider> </> ) : ( <> <Provider store={store}> <StatusBar barStyle="dark-content" /> <AppContainer /> </Provider> </> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); 这是react中的函数组件还是类组件?
07-24
<think>根据用户提供的信息,用户希望合并HTML表格中相同内容的单元格。结合引用内容,使用`rowspan`和`colspan`属性可以实现。用户引用的资料[^1][^2]提到,`colspan`用于合并列,`rowspan`用于合并行。引用[^3]还展示了在VueElement-UI中动态合并单元格的实例。用户的真实需求是在HTML表格中合并相同内容的单元格。这需要先识别相同内容,再决定如何合并。由于用户要求用HTML原生方式,我们可以用常规的HTML代码示例,不使用框架。具体步骤:1.遍历表格的行和列,记录连续相同内容的单元格位置。2.确定合并方向(行或列)及合并数量。3.在第一个相同内容单元格设置`rowspan`或`colspan`属性,删除后续重复的单元格。但注意:用户未说明数据来源是静态还是动态生成。我们先提供静态HTML示例,再补充动态生成的思路(使用JavaScript)。#回答结构:1.静态HTML合并单元格方法(针对行合并和列合并分别举例)。2.动态合并思路(JavaScript实现)。3.注意事项(如:合并后需删除多余单元格)。</think> 要在HTML表格中合并相同内容的单元格,需使用`rowspan`(纵向合并行)和`colspan`(横向合并列)属性。以下是具体实现方法及完整示例: ### 一、基础合并方法 1. **行合并(rowspan)** 当上下单元格内容相同时,保留第一个单元格并添加`rowspan`属性,删除后续重复单元格: ```html <!-- 合并前 --> <tr> <td>A</td> <!-- 保留 --> <td>B</td> </tr> <tr> <td>A</td> <!-- 删除 --> <td>C</td> </tr> <!-- 合并后 --> <tr> <td rowspan="2">A</td> <!-- 跨2行 --> <td>B</td> </tr> <tr> <!-- 此处删除重复的A单元格 --> <td>C</td> </tr> ``` 2. **列合并(colspan)** 当左右单元格内容相同时,保留第一个单元格添加`colspan`,删除右侧重复单元格: ```html <!-- 合并前 --> <tr> <td>A</td> <td>A</td> <!-- 重复 --> <td>B</td> </tr> <!-- 合并后 --> <tr> <td colspan="2">A</td> <!-- 跨2列 --> <!-- 此处删除第二个A单元格 --> <td>B</td> </tr> ``` --- ### 二、完整实例(合并相同内容的单元格) ```html <table border="1"> <tr> <th>产品</th> <th>颜色</th> <th>库存</th> </tr> <tr> <td rowspan="2">手机</td> <!-- 合并两行 --> <td>黑色</td> <td>30</td> </tr> <tr> <!-- 此处删除"手机"单元格 --> <td>白色</td> <td>25</td> </tr> <tr> <td>笔记本</td> <td colspan="2">缺货</td> <!-- 合并两列 --> <!-- 此处删除右侧重复单元格 --> </tr> </table> ``` **效果预览:** | 产品 | 颜色 | 库存 | |--------|------|------| | 手机 | 黑色 | 30 | | | 白色 | 25 | | 笔记本 | 缺货(跨两列)| | --- ### 三、动态合并(JavaScript实现) 若需自动合并相同内容: ```html <script> function mergeCells() { const table = document.getElementById("myTable"); // 合并相同内容的列 for (let col = 0; col < table.rows[0].cells.length; col++) { let prevValue = ""; let startRow = 0; for (let row = 0; row < table.rows.length; row++) { const cell = table.rows[row].cells[col]; if (cell.textContent === prevValue) { // 标记重复单元格需删除 cell.style.display = "none"; // 更新第一个单元格的rowspan table.rows[startRow].cells[col].rowSpan++; } else { prevValue = cell.textContent; startRow = row; // 重置起始行 } } } } </script> <!-- 调用方法 --> <table id="myTable" border="1"> <!-- 表格内容 --> </table> <button onclick="mergeCells()">合并相同单元格</button> ``` --- ### 四、关键注意事项 1. **删除重复单元格** 合并后需用`display: none`或直接移除重复的`<td>`标签,否则表格结构会错乱[^1] 2. **动态框架实现** Vue/React等框架需通过计算合并策略(如Element-UI的`span-method`方法[^3]) 3. **结构对齐** 合并后每行的单元格数量需保持一致,避免使用`rowspan/colspan`后总格子数不一致 --- **
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值