安装组件时在react函数中使用Javascript_Javascript_Reactjs

安装组件时在react函数中使用Javascript

javascript reactjs

安装组件时在react函数中使用Javascript,javascript,reactjs,Javascript,Reactjs,我有我的键盘工作，但现在我实施的状态处理redux。我的旧版本是作为类组件工作的，javascript函数是在componentDidMount上调用的。现在，这不再是一个选项，因为我现在需要将它转换为函数，以使它能够与redux及其分派一起工作。我尝试将javascript放在返回项下，并将其作为一个单独的函数调用，但都没有做任何事情。有没有办法做到这一点 import React from 'react'; import '../../style/App.scss'; import $ fr

我有我的键盘工作，但现在我实施的状态处理redux。我的旧版本是作为类组件工作的，javascript函数是在componentDidMount上调用的。现在，这不再是一个选项，因为我现在需要将它转换为函数，以使它能够与redux及其分派一起工作。我尝试将javascript放在返回项下，并将其作为一个单独的函数调用，但都没有做任何事情。有没有办法做到这一点

import React from 'react';
import '../../style/App.scss';
import $ from "jquery";
import { UPDATE_GAME_STATE } from '../../actions'
import { useDispatch } from 'react-redux';

function Keypad(){
  init_keypad();
  return(
  <div className="keypad_wrapper">
    <div className="screen"></div>
    <div className="error notification">ERROR</div>
    <div className="success notification">SUCCESS</div>

    <div className="key">1</div>
    <div className="key">2</div>
    <div className="key">3</div>
    <div className="key">4</div>
    <div className="key">5</div>
    <div className="key">6</div>
    <div className="key">7</div>
    <div className="key">8</div>
    <div className="key">9</div>
    <div className="key last">0</div>
  </div>
);
}
export default Keypad;


function init_keypad(){
  const dispatch = useDispatch();
  window.tries = 0;
  $(".key").click(function(){
    var n = $(this).html();
    $('.screen').append( n );
    window.tries++;
    // if 4 digits are entered check if its correct
    if (window.tries >= 4){
      var w = $('.screen').html();
      if (w == 1234){
        $('.success').show().delay(5000).queue(function(n) {
          $('.success').hide(); n();
          dispatch(UPDATE_GAME_STATE('playing'));
        });
      }
      else{
        $('.error').show().delay(1000).queue(function(n) {
          $('.error').hide(); n();
        });
      }
      $('.screen').html('');
      window.tries = 0;
    }
  });
}

从“React”导入React；
导入“../style/App.scss”；
从“jquery”导入$；
从“../../actions”导入{UPDATE_GAME_STATE}
从'react redux'导入{useDispatch}；
功能键盘（）{
初始化键盘（）；
返回(
错误
成功
1.
2.
3.
4.
5.
6.
7.
8.
9
0
);
}
导出默认键盘；
函数初始化键盘（）{
const dispatch=usedpatch（）；
window.trys=0；
$（“.key”）。单击（函数（）{
var n=$（this.html（）；
$（'.screen'）。追加（n）；
window.tries++；
//如果输入了4位数字，请检查其是否正确
如果（window.trys>=4）{
var w=$（'.screen'）.html（）；
如果（w==1234）{
$（'.success'）.show（）.delay（5000）.队列（函数（n）{
$（'.success'）.hide（）；n（）；
调度（更新游戏状态（“正在玩”）；
});
}
否则{
$（'.error'）.show（）.delay（1000）.队列（函数（n）{
$（'.error'）.hide（）；n（）；
});
}
$（'.screen'）.html（''）；
window.trys=0；
}
});
}

错误消息现在如下所示：

React Hook“useDispatch”在函数“init_keypad”中调用，该函数既不是React函数组件，也不是自定义React Hook函数React hooks/rules of hooks

首先，您需要在React组件中使用

useDispatch

，而不是正常的功能，在这种情况下是

Keypad

您需要将其包装在useEffect中，因为它相当于类component中的componentDidMount

import React，{useffect}来自“React”；
功能键盘（）{
useffect（（）=>{
初始化键盘（）；
}, []);
返回(
...
);
}

首先，您需要在React组件中使用

useDispatch

，而不是正常的功能，在这种情况下是

键盘

您需要将其包装在useEffect中，因为它相当于类component中的componentDidMount

import React，{useffect}来自“React”；
功能键盘（）{
useffect（（）=>{
初始化键盘（）；
}, []);
返回(
...
);
}

您需要在react组件中使用钩子，这在您使用useDispatch时不会发生，因此，在这里您可以通过两种方式将初始化键盘
作为react功能组件，然后使用

useDispatch

，或者更简单地从键盘
传递
useDispatch

import React from 'react'; import '../../style/App.scss'; import $ from "jquery"; import { UPDATE_GAME_STATE } from '../../actions' import { useDispatch, useEffect } from 'react-redux'; function Keypad(){ const dispatch = useDispatch(); useEffect(() => { init_keypad(dispatch); }, []); return( <div className="keypad_wrapper"> <div className="screen"></div> <div className="error notification">ERROR</div> <div className="success notification">SUCCESS</div> <div className="key">1</div> <div className="key">2</div> <div className="key">3</div> <div className="key">4</div> <div className="key">5</div> <div className="key">6</div> <div className="key">7</div> <div className="key">8</div> <div className="key">9</div> <div className="key last">0</div> </div> ); } export default Keypad; function init_keypad(dispatch){ window.tries = 0; $(".key").click(function(){ var n = $(this).html(); $('.screen').append( n ); window.tries++; // if 4 digits are entered check if its correct if (window.tries >= 4){ var w = $('.screen').html(); if (w == 1234){ $('.success').show().delay(5000).queue(function(n) { $('.success').hide(); n(); dispatch(UPDATE_GAME_STATE('playing')); }); } else{ $('.error').show().delay(1000).queue(function(n) { $('.error').hide(); n(); }); } $('.screen').html(''); window.tries = 0; } }); }

从“React”导入React；导入“../style/App.scss”；从“jquery”导入$；从“../../actions”导入{UPDATE_GAME_STATE} 从'react redux'导入{useDispatch，useEffect}；功能键盘（）{ const dispatch=usedpatch（）； useffect（（）=>{ 初始键盘（调度）； }, []); 返回( 错误成功 1. 2. 3. 4. 5. 6. 7. 8. 9 0 ); } 导出默认键盘；功能初始化键盘（调度）{ window.trys=0； $（“.key”）。单击（函数（）{ var n=$（this.html（）； $（'.screen'）。追加（n）； window.tries++； //如果输入了4位数字，请检查其是否正确如果（window.trys>=4）{ var w=$（'.screen'）.html（）；如果（w==1234）{ $（'.success'）.show（）.delay（5000）.队列（函数（n）{ $（'.success'）.hide（）；n（）；调度（更新游戏状态（“正在玩”）； }); } 否则{ $（'.error'）.show（）.delay（1000）.队列（函数（n）{ $（'.error'）.hide（）；n（）； }); } $（'.screen'）.html（''）； window.trys=0； } }); }
您需要在react组件中使用钩子，这在您使用useDispatch时不会发生，因此，在这里您可以通过两种方式将初始化键盘
作为react功能组件，然后使用
useDispatch
，或者更简单地从键盘
传递
useDispatch

import React from 'react'; import '../../style/App.scss'; import $ from "jquery"; import { UPDATE_GAME_STATE } from '../../actions' import { useDispatch, useEffect } from 'react-redux'; function Keypad(){ const dispatch = useDispatch(); useEffect(() => { init_keypad(dispatch); }, []); return( <div className="keypad_wrapper"> <div className="screen"></div> <div className="error notification">ERROR</div> <div className="success notification">SUCCESS</div> <div className="key">1</div> <div className="key">2</div> <div className="key">3</div> <div className="key">4</div> <div className="key">5</div> <div className="key">6</div> <div className="key">7</div> <div className="key">8</div> <div className="key">9</div> <div className="key last">0</div> </div> ); } export default Keypad; function init_keypad(dispatch){ window.tries = 0; $(".key").click(function(){ var n = $(this).html(); $('.screen').append( n ); window.tries++; // if 4 digits are entered check if its correct if (window.tries >= 4){ var w = $('.screen').html(); if (w == 1234){ $('.success').show().delay(5000).queue(function(n) { $('.success').hide(); n(); dispatch(UPDATE_GAME_STATE('playing')); }); } else{ $('.error').show().delay(1000).queue(function(n) { $('.error').hide(); n(); }); } $('.screen').html(''); window.tries = 0; } }); }

从“React”导入React；导入“../style/App.scss”；从“jquery”导入$；从“../../actions”导入{UPDATE_GAME_STATE} 从'react redux'导入{useDispatch，useEffect}；功能键盘（）{ const dispatch=usedpatch（）； useffect（（）=>{ 初始键盘（调度）； }, []); 返回( 错误成功 1. 2. 3. 4. 5. 6. 7. 8. 9 0 ); } 导出默认键盘；功能初始化键盘（调度）{ window.trys=0； $（“.key”）。单击（函数（）{ var n=$（this.html（）； $（'.screen'）。追加（n）； window.tries++； //如果输入了4位数字，请检查其是否正确如果（window.trys>=4）{ var w=$（'.screen'）.html（）；如果（w==1234）{ $（'.success'）.show（）.delay（5000）.队列（函数（n）{ $（'.success'）.hide（）；n（）；调度（更新游戏状态（“正在玩”）； }); } 否则{ $（'.error'）.show（）.delay（1000）.队列（函数（n）{ $（'.error'）.hide（）；n（）； }); } $（'.screen'）.html（''）； window.trys=0； } }); }
您可以使用“useffect”钩子将其用作组件didmount等价物，避免使用窗口对象跟踪计数，而是使用“useRef”钩子，如下所示

import React from 'react'; import '../../style/App.scss'; import $ from "jquery"; import { UPDATE_GAME_STATE } from '../../actions' import { useDispatch } from 'react-redux'; function Keypad() { const dispatch = useDispatch(); const tries = React.useRef(0); React.useEffect(() => { $(".key").click(function () { var n = $(this).html(); $('.screen').append(n); tries.current++; // if 4 digits are entered check if its correct if (tries.current >= 4) { var w = $('.screen').html(); if (w == 1234) { $('.success').show().delay(5000).queue(function (n) { $('.success').hide(); n(); dispatch(UPDATE_GAME_STATE('playing')); }); } else { $('.error').show().delay(1000).queue(function (n) { $('.error').hide(); n(); }); } $('.screen').html(''); tries.current = 0; } }); }, []); return ( <div className="keypad_wrapper"> <div className="screen"></div> <div className="error notification">ERROR</div> <div className="success notification">SUCCESS</div> <div className="key">1</div> <div className="key">2</div> <div className="key">3</div> <div className="key">4</div> <div className="key">5</div> <div className="key">6</div> <div className="key">7</div> <div className="key">8</div> <div className="key">9</div> <div className="key last">0</div> </div> ); } export default Keypad;

从“React”导入React；导入“../style/App.scss”；从“jquery”导入$；从“../../actions”导入{UPDATE_GAME_STATE} 从'react redux'导入{useDispatch}；功能键盘（）{ const dispatch=usedpatch（）； const trys=React.useRef（0）； R