#javascript #reactjs #webpack #umd
#javascript #reactjs #веб-пакет #umd
Вопрос:
Я пытаюсь использовать компонент react в моем HTML amp; javascript.Итак, что я делаю, я компилирую свой компонент react с помощью webpack и создаю файл пакета в UMD. он работает нормально, когда я создаю Hello world пример.
Он отлично работает в приведенном ниже примере без использования состояния. вот рабочий пример
https://jsbin.com/paduyarase/edit?html , выходной
Теперь я ввожу usestate в свой компонент.Я скомпилировал нижеприведенную функцию и использую javascript, он не работает.
import React from 'react';
const Index = () => {
const [state,setState] = React.useState(0)
return (
<div>
hello World {state}
</div>
);
};
export default Index;
Этот компонент не работает
https://jsbin.com/hefiretaru/edit?html , выходной
получение ошибки
ошибка ошибки: уменьшенная ошибка реакции #321; посетите https://reactjs.org/docs/error-decoder.html?invariant=321 для получения полного сообщения или используйте неминифицированную среду разработки для получения полных ошибок и дополнительных полезных предупреждений. в L (:10:4000) в Object.useState (:10:5366) в t.default (:2:1777) в renderWithHooks (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:15015:20 ) в mountIndeterminateComponent (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:17841:15 ) в начале работы (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:19079:18 ) в HTMLUnknownElement.callCallback (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:3942:16 ) в Object.invokeGuardedCallbackDev (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:3991:18 ) при обратном вызове invokeGuardedCallback (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:4053:33 ) в начале работы $1 (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:23994:9 ) VM178: 10 Неперехваченная ошибка: уменьшенная ошибка реакции # 321; посещение https://reactjs.org/docs/error-decoder.html?invariant=321 для получения полного сообщения или используйте неминифицированную среду разработки для получения полных ошибок и дополнительных полезных предупреждений. в L (:10:4000) в Object.useState (:10:5366) в t.default (:2:1777) в renderWithHooks (VM165 реагирует-dom.development.js:15015)
код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>
<script>
!function(e,t){"object"==typeof exportsamp;amp;"object"==typeof module?module.exports=t():"function"==typeof defineamp;amp;define.amd?define([],t):"object"==typeof exports?exports.MyCom=t():e.MyCom=t()}(window,(function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbolamp;amp;Symbol.toStringTagamp;amp;Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1amp;tamp;amp;(e=r(e)),8amp;t)return e;if(4amp;tamp;amp;"object"==typeof eamp;amp;eamp;amp;e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2amp;tamp;amp;"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=eamp;amp;e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t,r){"use strict";e.exports=r(2)},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n);function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,u=void 0;try{for(var c,f=e[Symbol.iterator]();!(n=(c=f.next()).done)amp;amp;(r.push(c.value),!t||r.length!==t);n=!0);}catch(e){o=!0,u=e}finally{try{n||null==f.return||f.return()}finally{if(o)throw u}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}t.default=function(){var e=u(o.a.useState(0),2),t=e[0];e[1];return o.a.createElement("div",null,"hello World ",t)}},function(e,t,r){"use strict";
/** @license React v16.12.0
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var n=r(3),o="function"==typeof Symbolamp;amp;Symbol.for,u=o?Symbol.for("react.element"):60103,c=o?Symbol.for("react.portal"):60106,f=o?Symbol.for("react.fragment"):60107,l=o?Symbol.for("react.strict_mode"):60108,i=o?Symbol.for("react.profiler"):60114,a=o?Symbol.for("react.provider"):60109,s=o?Symbol.for("react.context"):60110,p=o?Symbol.for("react.forward_ref"):60112,y=o?Symbol.for("react.suspense"):60113;oamp;amp;Symbol.for("react.suspense_list");var d=o?Symbol.for("react.memo"):60115,b=o?Symbol.for("react.lazy"):60116;oamp;amp;Symbol.for("react.fundamental"),oamp;amp;Symbol.for("react.responder"),oamp;amp;Symbol.for("react.scope");var m="function"==typeof Symbolamp;amp;Symbol.iterator;function v(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant=" e,r=1;r<arguments.length;r )t ="amp;args[]=" encodeURIComponent(arguments[r]);return"Minified React error #" e "; visit " t " for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},S={};function g(e,t,r){this.props=e,this.context=t,this.refs=S,this.updater=r||h}function j(){}function _(e,t,r){this.props=e,this.context=t,this.refs=S,this.updater=r||h}g.prototype.isReactComponent={},g.prototype.setState=function(e,t){if("object"!=typeof eamp;amp;"function"!=typeof eamp;amp;null!=e)throw Error(v(85));this.updater.enqueueSetState(this,e,t,"setState")},g.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},j.prototype=g.prototype;var O=_.prototype=new j;O.constructor=_,n(O,g.prototype),O.isPureReactComponent=!0;var w={current:null},x={current:null},k=Object.prototype.hasOwnProperty,P={key:!0,ref:!0,__self:!0,__source:!0};function C(e,t,r){var n,o={},c=null,f=null;if(null!=t)for(n in void 0!==t.refamp;amp;(f=t.ref),void 0!==t.keyamp;amp;(c="" t.key),t)k.call(t,n)amp;amp;!P.hasOwnProperty(n)amp;amp;(o[n]=t[n]);var l=arguments.length-2;if(1===l)o.children=r;else if(1<l){for(var i=Array(l),a=0;a<l;a )i[a]=arguments[a 2];o.children=i}if(eamp;amp;e.defaultProps)for(n in l=e.defaultProps)void 0===o[n]amp;amp;(o[n]=l[n]);return{$typeof:u,type:e,key:c,ref:f,props:o,_owner:x.current}}function E(e){return"object"==typeof eamp;amp;null!==eamp;amp;e.$typeof===u}var $=// /g,R=[];function A(e,t,r,n){if(R.length){var o=R.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function M(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>R.lengthamp;amp;R.push(e)}function I(e,t,r){return null==e?0:function e(t,r,n,o){var f=typeof t;"undefined"!==famp;amp;"boolean"!==f||(t=null);var l=!1;if(null===t)l=!0;else switch(f){case"string":case"number":l=!0;break;case"object":switch(t.$typeof){case u:case c:l=!0}}if(l)return n(o,t,""===r?"." q(t,0):r),1;if(l=0,r=""===r?".":r ":",Array.isArray(t))for(var i=0;i<t.length;i ){var a=r q(f=t[i],i);l =e(f,a,n,o)}else if(null===t||"object"!=typeof t?a=null:a="function"==typeof(a=mamp;amp;t[m]||t["@@iterator"])?a:null,"function"==typeof a)for(t=a.call(t),i=0;!(f=t.next()).done;)l =e(f=f.value,a=r q(f,i ),n,o);else if("object"===f)throw n="" t,Error(v(31,"[object Object]"===n?"object with keys {" Object.keys(t).join(", ") "}":n,""));return l}(e,"",t,r)}function q(e,t){return"object"==typeof eamp;amp;null!==eamp;amp;null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$" ("" e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function T(e,t){e.func.call(e.context,t,e.count )}function U(e,t,r){var n=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count ),Array.isArray(e)?F(e,n,r,(function(e){return e})):null!=eamp;amp;(E(e)amp;amp;(e=function(e,t){return{$typeof:u,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o (!e.key||tamp;amp;t.key===e.key?"":("" e.key).replace($,"$amp;/") "/") r)),n.push(e))}function F(e,t,r,n,o){var u="";null!=ramp;amp;(u=("" r).replace($,"$amp;/") "/"),I(e,U,t=A(t,u,n,o)),M(t)}function L(){var e=w.current;if(null===e)throw Error(v(321));return e}var N={Children:{map:function(e,t,r){if(null==e)return e;var n=[];return F(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;I(e,T,t=A(null,null,t,r)),M(t)},count:function(e){return I(e,(function(){return null}),null)},toArray:function(e){var t=[];return F(e,t,null,(function(e){return e})),t},only:function(e){if(!E(e))throw Error(v(143));return e}},createRef:function(){return{current:null}},Component:g,PureComponent:_,createContext:function(e,t){return void 0===tamp;amp;(t=null),(e={$typeof:s,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$typeof:a,_context:e},e.Consumer=e},forwardRef:function(e){return{$typeof:p,render:e}},lazy:function(e){return{$typeof:b,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$typeof:d,type:e,compare:void 0===t?null:t}},useCallback:function(e,t){return L().useCallback(e,t)},useContext:function(e,t){return L().useContext(e,t)},useEffect:function(e,t){return L().useEffect(e,t)},useImperativeHandle:function(e,t,r){return L().useImperativeHandle(e,t,r)},useDebugValue:function(){},useLayoutEffect:function(e,t){return L().useLayoutEffect(e,t)},useMemo:function(e,t){return L().useMemo(e,t)},useReducer:function(e,t,r){return L().useReducer(e,t,r)},useRef:function(e){return L().useRef(e)},useState:function(e){return L().useState(e)},Fragment:f,Profiler:i,StrictMode:l,Suspense:y,createElement:C,cloneElement:function(e,t,r){if(null==e)throw Error(v(267,e));var o=n({},e.props),c=e.key,f=e.ref,l=e._owner;if(null!=t){if(void 0!==t.refamp;amp;(f=t.ref,l=x.current),void 0!==t.keyamp;amp;(c="" t.key),e.typeamp;amp;e.type.defaultProps)var i=e.type.defaultProps;for(a in t)k.call(t,a)amp;amp;!P.hasOwnProperty(a)amp;amp;(o[a]=void 0===t[a]amp;amp;void 0!==i?i[a]:t[a])}var a=arguments.length-2;if(1===a)o.children=r;else if(1<a){i=Array(a);for(var s=0;s<a;s )i[s]=arguments[s 2];o.children=i}return{$typeof:u,type:e.type,key:c,ref:f,props:o,_owner:l}},createFactory:function(e){var t=C.bind(null,e);return t.type=e,t},isValidElement:E,version:"16.12.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:w,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:x,IsSomeRendererActing:{current:!1},assign:n}},D={default:N},V=Damp;amp;N||D;e.exports=V.default||V},function(e,t,r){"use strict";
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/var n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;function c(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r )t["_" String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,f,l=c(e),i=1;i<arguments.length;i ){for(var a in r=Object(arguments[i]))o.call(r,a)amp;amp;(l[a]=r[a]);if(n){f=n(r);for(var s=0;s<f.length;s )u.call(r,f[s])amp;amp;(l[f[s]]=r[f[s]])}}return l}}])}));
</script>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(
React.createElement(MyCom.default),
document.getElementById('root')
);
</script>
</body>
</html>
Комментарии:
1. Вы видели ошибку в reactjs.org/docs/error-decoder.html/?invariant=321 как следует из сообщения об ошибке? Поскольку мы не можем видеть код, использующий компонент, нам трудно помочь вам в дальнейшем.
2. Но я использовал правильный способ usestate
3. Я согласен с плакатом ниже. Ваш код React верен в том виде, в каком он написан. Происходит что-то еще. Интересно, что вы ссылаетесь на версию 17.0.1 React, но комментарий ниже (@license React v16.12.0), похоже, говорит о том, что вы также пытаетесь использовать 16.12.0.
Ответ №1:
Уменьшенная ошибка React # 321 обычно означает, что у вас есть две конфликтующие версии React. выполните поиск "react": в вашем редакторе. Если вы найдете две версии (16.8 и 17.0), проблема устранена.
Если речь идет не о дубликате, удалите все комментарии в render() компонентов класса.