![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
luotouzi
这个作者很懒,什么都没留下…
展开
-
Antd Pro操作ProTable/Table实现拖动排序(sortablejs)
antd官方实现过于复杂,这里通过sortablejs来实现DOM结构<div className="draggableTable" ref={sortableTable}> <ProTable rowKey="id" request={params => loadXXX(params)} columns={columns} actionRef={tableRef} rowClassName={(record, index) =&g.原创 2021-09-14 21:36:01 · 1657 阅读 · 0 评论 -
React监听对象型State的变化&立即更新state
描述很多时候,我们需要在页面渲染之前先加载出需要呈现的state,如下面例子——在渲染Select组件前,首先先需要将point数组加载出来<Select placeholder="选择地点" onChange={(value) => { ... }}> { point.map((value, key) => <Select.Option value={value}>{value}</Select.Option> ) }原创 2021-09-07 20:57:14 · 9581 阅读 · 1 评论 -
React中useState值为对象时改变值不渲染
问题修改State并重新setState(arr)后,值改变,但并未重新渲染const [arr, setArr] = useState([])arr.push(1)setArr(arr)原因React中默认浅监听,当State值为对象时,栈中存的是对象的引用(地址),setState改变的是堆中的数据所以此时 setArr(arr) 后,栈中的地址还是原地址,React浅监听到地址没变,故会认为State并未改变,故没有重渲染页面解决思路:将栈中原arr所指向的地址改变即可1原创 2021-08-12 18:56:38 · 3810 阅读 · 0 评论 -
React结合Ant Design Pro开发项目理解(service、model、index等文件逻辑关系)
组件中传值react——值写在了视图层Antd pro——值写在model层,通过saveState扩展表达式,把值更新到state后会触发视图层的render方法【通过props获取model中的值】下图是整个项目各模块的关系大概流程是UI组件间的交互操作,首先调用Model中的effects,Model通过effects调用Service(封装了request请求)中的请求函数来发起请求,获取服务端返回的响应后,调用reducers来改变state,更新Viewservice文件编写对应原创 2021-08-06 20:04:48 · 1668 阅读 · 0 评论 -
React 将字符串解析为DOM元素
属性dangerouslySetInnerHTML={{__html: 字符串}}const str = "<div>我是要显示的DOM元素</div>"<div dangerouslySetInnerHTML={{__html: str}} />原创 2021-08-06 18:41:22 · 698 阅读 · 0 评论 -
React中使用Axios发起POST请求提交文件
通过Axios发起POST请求向后端提交文件首先,这里引入FormData——保存请求参数(为什么需要通过FormData来保存呢?)const formData = new FormData()formData.append('key', value)下面是Axios的post操作Axios({ headers: { 'Content-Type':'application/json' }, method: 'post', url:`后端url`, data: formData,原创 2021-07-29 15:56:58 · 3852 阅读 · 0 评论 -
React通过useRef获取对应的Dom/组件实例
步骤:1. 声明一个ref对象const formRef = useRef(false)2. 绑定对应的表单元素3. 通过formRef.current.validateFields().then(datas => {datas.name})获取原创 2021-07-29 11:37:08 · 1382 阅读 · 0 评论