腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >Redux替代SPFx 1.4和React 15的React组件交互-无挂钩

问Redux替代SPFx 1.4和React 15的React组件交互-无挂钩
EN

Stack Overflow用户

提问于 2020-10-29 18:33:00

回答 1查看 128关注 0票数 0

正如您所知道的，到目前为止，最新的onPrem SharePoint (2019)支持的版本是SPFx 1.4。不幸的是，这只出现在React 15中，它不支持钩子(钩子使react状态和使用redux变得容易)。

我们只需要让几个react类组件相互通信(比如在aync调用期间使用submit按钮禁用所有其他组件，同时启用微调轮作为一个示例场景)。

表格太多了。将回调函数从每个组件传递到其他组件肯定不是可伸缩的解决方案。

将现有的React升级到16会破坏SharePoint工作台，所以我们的测试是不可能的，所以路由也是不可能的。

我们考虑过Formik，但它似乎只适用于简单类型的输入控件，而我们正在使用奇特的流畅的UI控件和复杂的人群选择器。

我需要一个解决方案来调用组件setState函数从不同的组件在层次结构中，而不使用回调。什么是它的简单解决方案？或者是否知道框架可以在这方面帮助我们？

spfx

javascript

reactjs

typescript

react-redux

回答 1

Stack Overflow用户

发布于 2020-10-29 19:47:52

看起来我们不得不添加一些虚拟的父组件。

使用父组件的状态并将其作为道具传递给组件确实具有相同的目的。

道具的改变也会导致孩子重新渲染并服务于目的。

希望这对其他有同样情况的人有所帮助。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64597212

复制

React + Redux 组件化方案

react

作者：何方舟在介绍组件化方案之前，先对 react 和 redux 做一个简单介绍。 Why React 理想中的组件化，第一步应该就是组件的标签化，例如有一个 Header 组件，如下图所示

腾讯IVWEB团队

2017/05/03

1.4K0

React + Redux 组件化方案

react redux html npm

理想中的组件化，第一步应该就是组件的标签化，例如有一个 Header 组件，如下图所示

IMWeb前端团队

2019/12/04

5710

React + Redux 组件化方案

react javascript

React + Redux 组件化方案在介绍组件化方案之前，先对 react 和 redux 做一个简单介绍。 Why React 理想中的组件化，第一步应该就是组件的标签化，例如有一个 Head

IMWeb前端团队

2017/12/29

7820

React-Redux-DevTools和React-Redux优化

2023腾讯·技术创作特训营第二期

GitHub 地址：https://github.com/reduxjs/redux-devtools

杨不易呀

2023/10/01

2450

react 和 redux 入门

react

本文作者：IMWeb 王少飞原文出处：IMWeb社区未经同意，禁止转载 react的核心思想：组件封装。页面的所有元素都是可以封装成组件 react包含以下几个概念 1 组件 2 JS

IMWeb前端团队

2018/01/08

1.1K0

react 和 redux 入门

redux html react

react的核心思想：组件封装。页面的所有元素都是可以封装成组件 react包含以下几个概念

IMWeb前端团队

2019/12/04

6780

React redux

react

Redux是一个JavaScript状态管理库，它可以与任何JavaScript应用程序一起使用，不仅限于React。Redux基于单一状态树的概念，应用程序的所有状态都保存在一个对象中。通过使用Redux，可以以一种可预测和可维护的方式管理应用程序的状态，并使用纯函数来处理状态的变化。

堕落飞鸟

2023/05/20

1.2K0

【React】归纳篇（十）组件间通信方式之Redux | UI组件AntDesign | Redux-react

react redux ui 函数路由

文档： https://reacttraining.com/react-router/web/guides/philosophy

前端修罗场

2023/10/07

2710

【React】归纳篇（十）组件间通信方式之Redux | UI组件AntDesign | Redux-react

React 进阶 - React Redux

react redux 函数数据中间件

应用初始化时候，只请求一次数据，然后通过状态管理把数据存起来，需要数据的组件只需要从状态管理中‘拿’就可以了。

Cellinlab

2023/05/17

9450

React的诱惑: React-Redux-三大原则和React-Redux-基本使用、优化、综合运用、其他组件使用

react 2023腾讯·技术创作特训营第二期

官方文档：https://www.redux.org.cn/docs/introduction/ThreePrinciples.html

杨不易呀

2023/09/25

3140

React的诱惑: React-Redux-三大原则和React-Redux-基本使用、优化、综合运用、其他组件使用

React---react-redux的使用

redux javascript 容器 react 编程算法

1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。

半指温柔乐

2021/05/10

1.2K0

React 和 Redux 的动态导入

react webpack javascript 打包 api

对于大型 Web应用程序，代码组织非常重要。它有助于创建高性能且易于理解的代码。最简单的策略之一就是代码分离。使用像 Webpack 这样的工具，可以将代码拆分成更小的部分，它们分为两个不同的策略，静态和动态。

前端小智@大迁世界

2019/04/18

2.2K0

React和Redux——状态管理Flux和Redux

react

在强调组件化的React中，我们需要以高内聚、低耦合的原则设计高可复用性的组件。因此渲染组件的数据由两部分组成，一个是由父组件传入的Props参数、一个是组件的内部状态State。Props参数可以是任何的Javascript对象，作为组件本身可以通过使用propTypes限制必须输入的参数和输入参数的类型以保证组件的可用性。State负责维护组件内部的状态，组件内部必要时可以通过触发父组件传递的回调函数传递信息给父组件或者将State以Props的形式传递给子组件。

lyndonxdlin

2018/07/05

1.9K0

React-Redux 源码解析系列 -- React-Redux的作用

渲染

前面的章节讲完了redux的部分，又已经有了react,那为什么还需要有React-Redux呢？这个React-Redux 又帮助我们做了什么呢？

IMWeb前端团队

2019/12/03

7730

React中的Redux

react java

整个应用的state被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中。

贺贺V5

2018/08/21

4K0

React-Redux 源码解析系列 -- React-Redux的作用

react 安全

摘要总结：本文介绍了React-Redux的代码架构和设计理念，通过代码示例和示意图解释了React-Redux的代码结构和流程。同时，文章还探讨了React-Redux的优缺点，包括连接react和redux的方式、高阶组件的使用、纯组件的使用等。通过本文的讲解，可以更好地理解React-Redux的工作原理和架构设计，对于学习和使用React-Redux具有很高的参考价值。

IMWeb前端团队

2017/12/29

9980

使用Redux和React-redux在React中进行状态管理

javascript react redux ruby on rails

首先，我们需要使用create-react-app命令行工具安装新的react应用。

前端修罗场

2022/07/29

2.9K0

React进阶(6)-react-redux的使用

redux 容器 react api 编程算法

前言撰文:川川您将在本文当中学习到 react-redux是什么,解决什么问题 UI组件以及容器组件 react-redux中两个重要的API,Provider以及connect mapState

itclanCoder

2020/10/28

2K0

React引入Redux实现组件间共享状态

javascript

安装 npm install redux -s 在src目录下新建store文件夹，新增index.js文件导入redux基本模块 import { createStore } from 'redux'; const store = createStore(); export default store; 再新增reducer.js文件，这里存放共享的变量 const defaultState = { countNum: 0 } export default (state = defaultSta

明知山

2021/06/21

8990

react-redux

redux react 编程算法

React-Redux是Redux的官方React绑定。它允许您的React组件从Redux存储中读取数据，并将操作分派给存储以更新数据。它由二个重要的部分组成，一个是<Provider />组件，另一个是connect()是react-redux提供的一个柯里化的函数, 用于连接redux

_kyle

2020/08/24

9940

相似问题

React挂钩/ Redux和onChange事件

110

使用挂钩进行React和Redux

116

如何将SPFx和Reactjs更改为SPFx React-Redux？

使用Redux和react挂钩获取数据

123

React -测试单独的父组件(无redux)

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问Redux替代SPFx 1.4和React 15的React组件交互-无挂钩
EN