react中常用到的一些解决问题方法（整理一些真正有效能够使用到项目中的方法）（等待不断更新积累）

骑猪看日落 2022-04-18 00:45 393阅读 0赞

*  将semantic-ui-react应用到react中，需要注意

import { Table, Menu, Icon, Popup, Button, Header, Input } from 'semantic-ui-react'
    import 'semantic-ui-css/semantic.min.css';

npm i --save-dev semantic-ui-react

npm install semantic-ui-css --save

引入到react文件后，在安装时，需要分别安装如上两个组件

*  Rounter实现链接间的跳转

在src文件夹下面，创建一个文件夹home，下面创建一个Home.js

/**
     * Created by mapbar_front on 2018/3/18.
     */
    import React,{ Component} from 'react';
    
    export default class Home extends Component{
        render(){
            return (
                <div>
                    <h1>主页</h1>
                </div>
            )
        }
    }

在src文件夹下面，创建一个文件夹about，下面创建一个About.js

/**
     * Created by mapbar_front on 2018/3/18.
     */
    import React,{ Component} from 'react';
    
    export default class About extends Component{
        render(){
            return (
                <div>
                    <h1>关于</h1>
                </div>
            )
        }
    }

然后在App.js中

import React, { Component } from 'react';
    import {
        BrowserRouter as Router,
        Route,
        Link
    } from 'react-router-dom';
    import Home from './home/Home';
    import About from './about/About';
    import '../styles/App.css';
    
    class App extends Component {
      render() {
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to='/'>首页</Link></li>
                        <li><Link to='/about'>关于</Link></li>
                    </ul>
                    <hr/>
                    <Route exact path="/" component={About} />
                    <Route path="/about" component={Home} />
                </div>
            </Router>
        );
      }
    }
    
    export default App;

*  实现点击按钮，跳转到另外一个页面

首先，添加一个按钮

然后编辑点击事件

gotoDetailPage(){
            window.location.href="/UserStatus"
        }

如果页面内已经添加router，推荐使用下方代码，这样在其他浏览器不会弹出您是否要离开当前页面的提示

this.props.history.push("/UserStatus?userId=" + userId);

*  实现点击退出按钮，退出登录账号，跳转到登录页面

import React, { Component } from "react";
    import "./App.css";
    import aws_exports from "../aws-exports";
    import { withAuthenticator } from "aws-amplify-react";
    import Amplify, { API, graphqlOperation ,Auth} from "aws-amplify";
    import { Menu, Image, Dropdown, Divider } from "semantic-ui-react";
    import "semantic-ui-css/semantic.min.css";
    Amplify.configure(aws_exports);
    class App extends Component {
      async onLogoutClick(){
        try {
          await Auth.signOut();
          window.location.reload();
        } catch (e) {
          alert("SignOut error: " + e);
        }
      }
    
      render() {
        return (
          <div className="App">
            <Menu fixed="top">
              <Menu.Menu position="right">
                <Dropdown text="Alisa" pointing className="link item">
                  <Dropdown.Menu>
                    <Dropdown.Item
                      onClick={this.onLogoutClick.bind(this)}
                    >
                      Log Out
                    </Dropdown.Item>
                  </Dropdown.Menu>
                </Dropdown>
              </Menu.Menu>
            </Menu>
          </div>
        );
      }
    }
    
    export default withAuthenticator(App, true);

*  父页面点击view more之后，跳出弹窗，查看当前父页面的详细内容

如下代码所示，通过map遍历，定义了order，打印order发现，它是\{里面\{内容\}\}，所以通过，将order传给子组件OrderDetail.js

<Table.Body>
                    {
                        this.props.patientStatus && this.props.patientStatus.hasOwnProperty('orders') && this.props.patientStatus.orders.map((order, i) => {
                            console.log(order)
                            let tableRow = (
                                <Table.Row key={'orders-item-' + i}>
                                    <Table.Cell collapsing>
                                        <OrderDetail order={
       {order}}/>
                                    </Table.Cell>
                                </Table.Row>
                            )
                            return tableRow
                        })
                    }
                </Table.Body>

子组件OrderDetail.js，在render()\{后面，定义ordertail，将order值传递给ordertail

let ordertail = this.props.order ? this.props.order : {}

然后通过\{ordertail.order.status\}进行引用

<Table.Cell>{ordertail.order.status}</Table.Cell>

*  当需要判断两个既有空元素，null，又有空格，又有undefined的数组中的值，可以现在开头定义

import _ from 'lodash'

然后在需要判断的地方加上\_.isEmpty(元素)

if (_.isEmpty(a) && !_.isEmpty(b))

*  例如将类似2018-11-19T10:39:01的时间转化成毫秒，然后用当前时间减去这个时间，判断是多少天之前

首先，利用new Date().getTime()将该时间转化成标准时间，然后获取毫秒

new Date(2018-11-19T10:39:01).getTime()

然后获取当前时间的毫秒

var myDate = new Date();
    var mytime = myDate.getTime()

*  获取当前时间，并对当前时间进行编辑和操作

1.网址：[https://momentjs.com/][https_momentjs.com]

2.开头导入import moment from 'moment'

然后在需要使用的地方定义

const Date = moment().add(-2, 'days').format('YYYY-MM-DD_HH:mm:SS')

add(-2, 'days')表示当前时间再减两天

format('YYYY-MM-DD\_HH:mm:SS')表示将时间设置为年-月-日\_时:分:秒的格式

*  Rounter缓存

方式一：  
把加载页面的必要信息放URL里，后退就是浏览器的后退，回退时组件依然会重新渲染，componentDidMount的时候根据这些url的信息去请求API。数据保持离开时最新的状态。  
这种方法在翻页情况下使用固然可以，但是像下拉加载那样，是多次请求的数据集合，就无法通过这种方式解决，而且后退时依旧进行了一次http请求。  
方式二：

存储当前已经加载的数据到本地（sessionStorage,localStorage）  
详情回退后,从本地取出数据，进行渲染（所以componentDid内部要判断本地是否已经存在数据，如果存在则return，不存在从服务器获取数据）

这种方式回退时不需要再次进行http请求，也能满足下拉的情况，我选择的就是这种方式。

*  引入package.json文件

import packageJson from "../../package.json";
    const version = packageJson.version;
    console.log(version);

引入外部文件时，最多只能../不能.../，所以当外部文件是跟当前文件具有多层包裹关系时，比如三层包裹关系：

../../

*  删除本地模块  
    npm uninstall 模块  
    删除本地模块时你应该思考的问题：是否将在package.json上的相应依赖信息也消除？  
    npm uninstall 模块：删除模块，但不删除模块留在package.json中的对应信息  
    npm uninstall 模块 --save 删除模块，同时删除模块留在package.json中dependencies下的对应信息  
    npm uninstall 模块 --save-dev 删除模块，同时删除模块留在package.json中devDependencies下的对应信息
 *  父组件传值，子组件接收值

父组件传值

import IframeComponent from "./iframe";
    import React, { Component } from "react";
    class Iframe extends Component {
      render() {
        return (
          <IframeComponent iframeurl={iframeUrl} />
        );
      }
    }
    export default Iframe;

子组件接收

import ReactIframeResizer from "react-iframe-resizer-super";
    import React, { Component } from "react";
    class Iframe extends Component {
      render() {
        const iframeResizerOptions = { checkOrigin: false };
        console.log("props", this.props.iframeurl);
        return (
          <ReactIframeResizer
            src={this.props.iframeurl}
            iframeResizerEnable={true}
            ref="frame"
            iframeResizerOptions={iframeResizerOptions}
          />
        );
      }
    }
    export default Iframe;

*  子组件传值，父组件接收值

子组件

import React, { Component } from "react";
    import Calendar from "react-calendar";
    class UserStatus extends Component {
      constructor(props) {
        super(props);
        this.state = {
          date: new Date()
        };
      }
      onChange = date => {
        this.state.date = date;
        this.props.handleChild(this.state.date);
      };
      render() {
        return (
                <Calendar
                  onChange={this.onChange}//传值
                  onClick={this.props.returnHome}//传函数
                  value={this.state.date}
                  minDetail="month"
                  locale="en"
                  style={
       { height: "340px" }}
                />
        );
      }
    }
    export default UserStatus;

父组件

import React, { Component } from "react";、
    import Calendar1 from "./calendar";
    class UserStatus extends Component {
      constructor(props) {
        super(props);
        this.state = {
          calendarDate: new Date()
        };
      }
      handleChild(value) {
        this.setState({ calendarDate: value });
      }
      returnHome = () => {
        this.setState({
          activeStep: 0
        });
      };
      render() {
        console.log("this.state.calendarDate", this.state.calendarDate);
        return (
           <Calendar1
               handleChild={this.handleChild.bind(this)}
               returnHome={this.returnHome.bind(this)}
           />
        );
      }
    }
    export default UserStatus;

*  父组件传递函数给子组件

父组件

import React, { Component } from "react";
    import { connect } from "react-redux";
    import ReactTable from "react-table";
    import "react-table/react-table.css";
    import ChangeBilled from "./changeBilled";
    class Unbilled extends Component {
      constructor(props) {
        super(props);
        this.searchUsers = this.searchUsers.bind(this);
      }
      searchUsers() {
        Control.go( "/Unbilled" );
      }
      render() {
        return (
           <ChangeBilled searchUsers={this.searchUsers}/>
        );
      }
    }
    default connect Unbilled;

子组件

直接通过this.props.searchUsers()调用函数

*  contains包含，ne不包含

但是ne后面的条件必须写全，不能像contains那样，可以不写全

![20190314135234473.png][]![20190314135243901.png][]

*  Cannot find module 'react-dev-utils/crossSpawn' exception React App

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

![20190408222550252.png][]

Delete node\_modules folder and run "npm install"

*  页面内filter

1.加在末尾

const mapStateToProp = state => {
      const ...省略 = state.patientsListStore.接口;
      const allPatientStaff = state.patientsListStore.接口;
      console.log("allPatientStaff", allPatientStaff);
      const filterPatientStaff = allPatientStaff.filter(p => p.siteId >= 0);
      return {
        ...省略: ...省略,
        在页面内将要被引用的名字: filterPatientStaff
      };
    };

2.加在render下

let filterBillingChart = this.props.billingTableList.filter(function(n) {
          return n.cptCode === "99454";
        });
        console.log("filterBillingChart.length", filterBillingChart.length);

*  action内filter

export async function getFilter(...省略, ...省略, dispatch) {
      let newEvent = null;
      if (siteId) {
        newEvent = await API.graphql(
          graphqlOperation(...省略, {
            filter: {
              ...省略: {
                ne: true
              },
              and: [
                {
                  ...省略: {
                    eq: true
                  }
                }
              ]
            }
          })
        );
      }
      if (newEvent) {
        ...省略
      }
    }

*  输入框出现报错信息：React form error changing a controlled input of type text to be uncontrolled

直接在input的value值后面加上||''

*  鼠标移入移出事件：

<div className={styles.rightImgWrap} onClick={() => selectImg(item)}
                        onMouseEnter={() => handleMouseEnter(item)}
                        onMouseLeave={() => handleMouseLeave(item)}
                        style={
       { backgroundColor: item.checked || item.showChecked ? 'rgba(0, 0, 0, 0.3)' : 'none' }}
                      ></div>

*  使用本地项目包

介绍：我本地桌面有一个项目文件夹1，同时桌面上面有一个项目文件夹2。我的项目文件夹1中的package.json想要引用项目文件夹2

//方法一：
    "项目二的打包之后的名字": "link:../项目二的文件夹名字",
    //方法二：
    "项目二的打包之后的名字": "file:../项目二的文件夹名字",

注意：pnpm install或者yarn install才支持安装link的本地包，npm install不支持

[https_momentjs.com]: https://momentjs.com/
[20190314135234473.png]: https://img-blog.csdnimg.cn/20190314135234473.png
[20190314135243901.png]: /images/20220418/0be634580543445db630811cdcea2996.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220418/7466777796e3439aa3b54c0a31beee6b.png
[20190408222550252.png]: /images/20220418/e5018752533a4feb965364046c307a2c.png