使用React制作简易财务报表

1创建项目

2cd到该文件夹

3运行（开发模式）

如果再起一个服务器，可能会出现端口号不会自动排的现象，针对这种情况，可以在packagejson中自行设置端口号，如下图

4模拟数据服务器

    41  >

数据传值大概无非是这几种情况。

1父传子

2子传夫

3跨层级组件传值

4路由传值（什么情况都可以用~但是涉及一些长的或者隐私的不建议用）

我这个人对传值这块真的有时候迷迷糊糊的，所以这次刚好复习的时候整理一下传值。

这个是最简单也是最常用的传值了。

前提条件就是父组件要引用子组件！

通常是通过props和ref传值和 方法

props

通过ref传值

父组件可以通过ref选择到子组件的function，如果需要子组件的值则用return

父组件通过 props 向子组件传入一个方法，子组件在通过调用该方法，将数据以参数的形式传给父组件，父组件通过该方法使用数据。

利用 props callback 通信，父组件传递一个 callback 到子组件，当事件触发时将参数放置到 callback 带回给父组件。

使用 Context 作为中间载体传值。避免了在每一个层级手动的传递 props 属性，适合于多层级的时候使用

官方文档

首先：新建 Contextjs

最经典的就是使用 params 传值 需安装react-router-dom

形式：/:xx （xx就是要传值的参数）

怎么用呢？来看以下几步。

首先

路由配置 ：

1 js跳转 ：

thispropshistorypush('/index/mika')

2 标签跳转 :

引入 Link 标签 import { Link } from 'react-router-dom'

使用 Link 标签跳转 <Link to="/index/mika">this is link</Link>

跳转页面接收值 ： thispropsmatchparamsname 其中name就是传的参数值，自己定义了什么就叫什么名字。

还有一种 query 传参

1js跳转：

在要跳转的组件上绑定onClick就可以使用。query为一个对象，携带的是需要传的参数。

不需要提前引入，也不需要路由设置，正常配置就可以 。

跳转页面接收值 ： thispropslocationquery

简单的说一下2个传参的区别：

1 params 传递显示参数， query 传递不显示参数， query 相对于 params 来说较安全一点

2 params 传值页面刷新数据还在，而 query 传值页面刷新数据会消失。

3 params 传值只能传一个， query 可以传多个对象。

那有没有数据传参不显示、刷新地址栏数据也不会小时的方法呢？有啊！

传参的方法和query差不多，属性不一样。

不需要路由配置

1js跳转： thispropshistorypush({pathname:'/index',state:{name:'mima'}})

2 标签跳转 <Link to={{path:'/index',state:{name:'mika'}}}>XX</Link>

跳转页面接收值 ： thispropslocationstatename

以上暂时就这些了 没包括一些传值的包，如果需要可以自己去了解

方法一：导出 store

这应该是最简单省事同时也容易想到的方法，但是有一点需要注意：

不要在服务端渲染中使用该方法

如果你在使用服务端渲染的 app 中直接导出 store，那么 app 的所有 user 都会获得一个单例的 store (包括相同的 JWT Token)，这肯定不是你乐见的。

除去上述这种情况，当我们需要获取 store 中的 JWT Token 时，可以这么做：

/

storejs

/

import { createStore } from 'redux';

import reducer from '/reducer';

const store = createStore(reducer);

export default store;

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

创建 store 的方法还和以前一样，仅仅是导出它，以便于在其他文件中使用。

不要担心你使用的 createStore 方法可能会很复杂，放心的使用各种中间件比如 thunk, saga, devtools ，你需要做的仅仅是导出 store 而已。

紧接着，在需要用到 store 中数据的地方，引入 (import) 它。下面的例子就是我们在一个普通函数 apijs 中将 store 中的 JWT Token 通过 ajax 传递给服务端。

/

apijs

/

import store from '/store';

export function getProtectedThing() {

// grab current state

const state = storegetState();

// get the JWT token out of it

// (obviously depends on how your store is structured)

const authToken = statecurrentUsertoken;

// Pass the token to the server

return fetch('/user/thing', {

method: 'GET',

headers: {

Authorization: `Bearer ${authToken}`

}

})then(res => resjson());

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

在 Redux 官网的 FAQ 中有这样一个问题 我可以在组件中直接引入 store 并使用吗 ？

其实如果需要在 React 组件中使用 store，我们有更好的选择 (译者注：也是官方提倡的)：那就是使用 React-Redux 中的 connect 方法。

Mark Erikson，Redux 的维护者之一，在 Reddit 上就这个问题发表过如下看法：

通常情况下，不建议在 component 中通过 import 的方式来使用 store

在某些情况下，可以试着通过 thunk 或者其他一些 Redux 中间件来 *** 作 store 而不是直接去引用它。

但是凡事总有例外，打我自己的比方，有一个项目中 70% 的代码使用 Backbone 写的，在项目的一些模块中，我们同时需要来自 Backbone models 和 Redux store 中的数据，在这部分模块中，我们的确需要 import {store} from “store” 这种直接的引用方式，因为我们的确没有其他选择。

所以，直接引用并不是理想的方式，但是，如果有必要，也可以。

React Component 之外 dispatch action

如果你在 React Component 之外需要 dispatch action，那么同样的方法也是适用的：引入 store 然后再调用 storedispatch()，这和你在 react-redux 中通过 connect 函数获取到 dispatch 是一样的。

方法二：从 thunk 中获取 redux 的 state

如果你需要在 thunk 中获取 redux store 中的某项数据，更简单不过。你根本不需要直接引入 store，因为 thunk 的 action 中有一个 getState 的输入参数。

下面的例子就是从 thunk 的 action 创建函数中获取 JWT Token

/ actionsjs /

export function getProtectedThing() {

return (dispatch, getState) => {

// grab current state

const state = getState();

// get the JWT token out of it

// (obviously depends on how your store is structured)

const authToken = statecurrentUsertoken;

// Pass the token to the server

return fetch('/user/thing', {

method: 'GET',

headers: {

Authorization: `Bearer ${authToken}`

}

})then(res => resjson());

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

另外，如果你不想在 thunk 的 action 函数中直接使用 fetch，你可以选择将 fetch 封装到另外一个类中比如 apijs 当然你需要额外的参数将所需数据传递出去。

方法三：使用中间件(middleware)截获 action 中的数据

如果你不喜欢上述两种方法 (或是无法使用)，那么也可以试试下面这种方法。

开发一个自定义的 redux 中间件，“拦截” 特定的 action 在 action 触达 store 之前获取其携带的数据，甚至在中间件中直接获取 store

我们还以 JWT Token 为例。假设应用程序在用户成功登陆后会触发一个 LOG_SUCCESS 的 action，该 action 携带的数据包含 JWT Token

/

indexjs

/

const saveAuthToken = store => next => action => {

if(actiontype === 'LOGIN_SUCCESS') {

// after a successful login, update the token in the API

apisetToken(actionpayloadauthToken);

}

// continue processing this action

return next(action);

}

const store = createStore(

reducer,

applyMiddleware(saveAuthToken)

);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

在你的 apijs 中会有一个 setToken 的方法将 token 赋值给本地变量。

/

apijs

/

let currentAuthToken = null;

export function setToken(token) {

currentAuthToken = token;

}

export function getProtectedThing() {

// Pass the token to the server

return fetch('/user/thing', {

method: 'GET',

headers: {

Authorization: `Bearer ${currentAuthToken}`

}

})then(res => resjson());

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

如果你使用的 >

在react中是无法直接更改from表单元素的值的，必须通过setState()去响应用户的输入。

返回函数String，它包含以 Input 或 Binary 方式打开的文件中的字符。

返回 String，它包含以 Input 或 Binary 方式打开的文件中的字符。语法Input(number, [#]filenumber)Input 函数的语法具有以下几个部分：部分描述number必要。

任何有效的数值表达式，指定要返回的字符个数。filenumber必要。任何有效的文件号。说明通常用 Print # 或 Put 将 Input 函数读出的数据写入文件。Input 函数只用于以 Input 或 Binary 方式打开的文件。

与 Input # 语句不同，Input 函数返回它所读出的所有字符，包括逗号、引号和前导空格等。对于 Binary 访问类型打开的文件，如果试图用 Input 函数读出整个文件，则会在 EOF 返回 True 时产生错误。

在用 Input 读出二进制文件时，要用 LOF 和 Loc 函数代替 EOF 函数，而在使用 EOF 函数时要配合以 Get 函数。注意 对于文本文件中包含的字节数据要使用 InputB 函数。对于 InputB 来说，number 指定的是要返回的字节个数，而不是要返回的字符个数。

标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、单选按钮、按钮等等。

首先，state 变化是异步的，更新 state 后不能马上读取到新的 state。

其次，你这个 list 是通过 props 传进来的，要在组件第二次渲染的时候才能拿到更新后的 listxnld。

React Query 因其极大地简化了 React 应用程序中的数据获取而受到许多人的喜爱。但是它并不是数据获取库，它应该叫 异步状态管理器 ,它可以管理任何形式的异步状态——只要它得到一个 Promise。

从本质上讲，React Query 基于查询键值为您管理查询缓存。 只要键值是可序列化的，并且对查询的数据来说。它是唯一的，就可以使用它。虽然支持用字符串，但还是建议使用数组形式，因为内部最终还是会转化成数组。

React Query 很聪明，它会选择策略点来触发重新获取数据。

数据转换也是前端经常遇到的问题，因为API返回的数据可能不是我们刚好能用的，react-query也提供了转换器，并且也只在有数据的时候才会被调用。

因为每次渲染都会执行，如果转换数据的方法开销比较大，建议使用useCallback将select函数缓存起来。

初始化数据，也就是数据没有缓存时直接展示的内容，当缓存中有该数据时，则不会生效。

NextJS在React-Query的使用

以上就是关于使用React制作简易财务报表全部的内容，包括:使用React制作简易财务报表、在reactjs里面怎么解析json,比如 { a:"a",b:[{c:"c",d:"d" }] }、React传值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！