如何正确地重写AngularJS代码到React？

huangapple
go评论90阅读模式
英文:

How to properly re-write AngularJS code to React?

问题

以下是您提供的代码的中文翻译部分：

AngularJS（部分代码）：

  1. <script>
  2.     var app = angular.module('myapp', []);
  3.     
  4.     app.controller('MainCtrl', function($scope) {
  5.     
  6.      // 在初始化时调用，如果本地存储中存在数组则读取
  7.       $scope.checkAndInitiateFromLocalStorage = function() {
  8.         var readArrayStr = localStorage.getItem('messagingArray');
  9.         if (readArrayStr && readArrayStr.length > 0) {
  10.           $scope.arr = JSON.parse(readArrayStr);
  11.         } else {
  12.           $scope.arr = [{
  13.               name: "user1"
  14.             },
  15.             {
  16.               name: "user2"
  17.             },
  18.             {
  19.               name: "user3"
  20.             },
  21.             {
  22.               name: "user4"
  23.             }
  24.           ];
  25.         }
  26.       }
  28.       // 在每次更新时调用，将最新状态存储在本地存储中
  29.       $scope.updateLocalStorage = function() {
  30.         localStorage.setItem('messagingArray', JSON.stringify($scope.arr));
  31.         /* console.log("更新本地存储！！"); */
  32.       }
  34.       $scope.checkAndInitiateFromLocalStorage();
  35.     });
  36. </script>

React（部分代码）：

  1. <script src="react.min.js"></script>
  2. <script src="react-dom.min.js"></script>
  3. <script src="browser.min.js"></script>
  5. <div id="app"></div>
  7. <script type="text/babel">
  9. class Application extends React.Component {
  10.   constructor(props) {
  11.     super(props);
  13.     // 在初始化时调用，如果本地存储中存在数组则读取
  14.     const checkAndInitiateFromLocalStorage = () => {
  15.       var readArrayStr = localStorage.getItem('messagingArray');
  16.       if (readArrayStr && readArrayStr.length > 0) {
  17.         this.state.arr = JSON.parse(readArrayStr);
  18.       } else {
  19.         this.state = {
  20.           arr: [
  21.             { name: "user1" },
  22.             { name: "user2" },
  23.             { name: "user3" },
  24.             { name: "user4" }
  25.           ]
  26.         };
  27.       }
  28.     }
  30.     this.checkAndInitiateFromLocalStorage = this.checkAndInitiateFromLocalStorage.bind(this);
  31.     this.updateLocalStorage = this.updateLocalStorage.bind(this);
  32.   }
  34.   // 在每次更新时调用，将最新状态存储在本地存储中
  35.   updateLocalStorage() {
  36.     localStorage.setItem('messagingArray', JSON.stringify(this.state.arr));
  37.   };
  39.   componentDidMount() {
  40.     this.checkAndInitiateFromLocalStorage(); 
  41.     this.updateLocalStorage();
  42.   }
  44.   render() {
  45.     return (
  46.       <div>
  47.         <h3>显示数据</h3>
  48.         <ul>
  49.           {this.state.arr.map((obj, i) => (
  50.             <li key={i}>
  51.               {obj.name} - {obj.name}
  52.             </li>
  53.           ))}
  54.         </ul>
  55.       </div>
  56.     );
  57.   }
  58. }
  60. ReactDOM.render(<Application />, document.getElementById('app'));
  62. </script>

这是您提供的AngularJS和React代码的翻译。如有其他问题或需要进一步的翻译，请告诉我。

英文:

I have the code below which reads stores and updates data to and from from localstorage and it works fine with AngularJS.

Here is my issue:
Am trying to re-write the Angularjs code to React but it throws error unexpected token.

AngularJS:

  1. &lt;script&gt;
  2. var app = angular.module(&#39;myapp&#39;, []);
  3. app.controller(&#39;MainCtrl&#39;, function($scope) {
  4. //called at initiazation, reads from localstorage if array is present there
  5. $scope.checkAndInitiateFromLocalStorage = function() {
  6. var readArrayStr = localStorage.getItem(&#39;messagingArray&#39;);
  7. if (readArrayStr &amp;&amp; readArrayStr.length &gt; 0) {
  8. $scope.arr = JSON.parse(readArrayStr);
  9. } else {
  10. $scope.arr = [{
  11. name: &quot;user1&quot;
  12. },
  13. {
  14. name: &quot;user2&quot;
  15. },
  16. {
  17. name: &quot;user3&quot;
  18. },
  19. {
  20. name: &quot;user4&quot;
  21. }
  22. ];
  23. }
  24. }
  25. //called at each update, stores the latest status in localstorage
  26. $scope.updateLocalStorage = function() {
  27. localStorage.setItem(&#39;messagingArray&#39;, JSON.stringify($scope.arr));
  28. /* console.log(&quot;updated local storage !!&quot;); */
  29. }
  30. $scope.checkAndInitiateFromLocalStorage();
  31. });
  32. &lt;/script&gt;

React:

  1.     &lt;script src=&quot;react.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;react-dom.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;script src=&quot;browser.min.js&quot;&gt;&lt;/script&gt;
  4. &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  5. &lt;script type=&quot;text/babel&quot;&gt;
  6. class Application extends React.Component {
  7. constructor(props) {
  8. super(props);
  9. //called at initiazation, reads from localstorage if array is present there
  10. //const checkAndInitiateFromLocalStorage () {
  11. const checkAndInitiateFromLocalStorage = () =&gt; {
  12. var readArrayStr = localStorage.getItem(&#39;messagingArray&#39;);
  13. if (readArrayStr &amp;&amp; readArrayStr.length &gt; 0) {
  14. this.state.arr = JSON.parse(readArrayStr);
  15. } else {
  16. this.state = {
  17. arr: [
  18. {      name: &quot;user1&quot;},
  19. {      name: &quot;user2&quot;},
  20. {      name: &quot;user3&quot;},
  21. {      name: &quot;user4&quot;}
  22. ],
  23. };
  24. }
  25. }
  26. this.checkAndInitiateFromLocalStorage = this.checkAndInitiateFromLocalStorage.bind(this);
  27. this.updateLocalStorage = this.updateLocalStorage.bind(this);
  28. }
  29. //called at each update, stores the latest status in localstorage
  30. updateLocalStorage() {
  31. localStorage.setItem(&#39;messagingArray&#39;, JSON.stringify(this.state.arr));
  32. };
  33. componentDidMount() {
  34. this.checkAndInitiateFromLocalStorage(); 
  35. this.updateLocalStorage();
  36. }
  37. render() {
  38. return (
  39. &lt;div&gt;
  40. &lt;h3&gt;Display Data&lt;/h3&gt;
  41. &lt;ul&gt;
  42. {this.state.arr.map((obj, i) =&gt; (
  43. &lt;li key={i}&gt;
  44. {obj.name} - {obj.name}
  45. &lt;/li&gt;
  46. ))}
  47. &lt;/ul&gt;
  48. &lt;/div&gt;
  49. );
  50. }
  51. }
  52. ReactDOM.render(&lt;Application /&gt;, document.getElementById(&#39;app&#39;));
  53. &lt;/script&gt;

Here is the updated react error message:

  1. Uncaught TypeError: Cannot read properties of undefined (reading &#39;bind&#39;)
  2. at new Application (eval at transform.run

答案1

得分: 0

这个问题通过将checkAndInitiateFromLocalStorage的定义移到构造函数之外来解决。

以下是代码

  1. class Application extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  5.     this.state = {
  6.       arr: [
  7.         { name: "user1" },
  8.         { name: "user2" },
  9.         { name: "user3" },
  10.         { name: "user4" }
  11.       ]
  12.     };
  14.     this.checkAndInitiateFromLocalStorage = this.checkAndInitiateFromLocalStorage.bind(this);
  15.     this.updateLocalStorage = this.updateLocalStorage.bind(this);
  16.   }
  18.   checkAndInitiateFromLocalStorage() {
  19.     var readArrayStr = localStorage.getItem('messagingArray');
  20.     if (readArrayStr && readArrayStr.length > 0) {
  21.       this.state.arr = JSON.parse(readArrayStr);
  22.     } else {
  23.       this.state.arr;
  24.     }
  25.   }
  27.   updateLocalStorage() {
  28.     localStorage.setItem('messagingArray', JSON.stringify(this.state.arr));
  29.   }
  31.   componentDidMount() {
  32.     this.checkAndInitiateFromLocalStorage();
  33.     this.updateLocalStorage();
  34.   }
  36.   render() {
  37.     return (
  38.       <div>
  39.         <h3>Display Data</h3>
  40.         <ul>
  41.           {this.state.arr.map((obj, i) => (
  42.             <li key={i}>
  43.               {obj.name} - {obj.name}
  44.             </li>
  45.           ))}
  46.         </ul>
  47.       </div>
  48.     );
  49.   }
  50. }
  52. ReactDOM.render(<Application />, document.getElementById('app'));

请注意，我已经将HTML标记的编码（如&quot;和&lt;）还原为原始代码，以便更容易阅读。

英文:

This issue was solved by Moving the definition of checkAndInitiateFromLocalStorage outside of the constructor.

Here is the code below

  1. class Application extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {
  5. arr: [
  6. {      name: &quot;user1&quot;},
  7. {      name: &quot;user2&quot;},
  8. {      name: &quot;user3&quot;},
  9. {      name: &quot;user4&quot;}
  10. ],
  11. };
  12. this.checkAndInitiateFromLocalStorage = this.checkAndInitiateFromLocalStorage.bind(this);
  13. this.updateLocalStorage = this.updateLocalStorage.bind(this);
  14. }
  15. checkAndInitiateFromLocalStorage () {
  16. //const checkAndInitiateFromLocalStorage = () =&gt; {
  17. var readArrayStr = localStorage.getItem(&#39;messagingArray&#39;);
  18. if (readArrayStr &amp;&amp; readArrayStr.length &gt; 0) {
  19. this.state.arr = JSON.parse(readArrayStr);
  20. } else {
  21. this.state.arr;
  22. }
  23. }
  24. //called at each update, stores the latest status in localstorage
  25. updateLocalStorage() {
  26. localStorage.setItem(&#39;messagingArray&#39;, JSON.stringify(this.state.arr));
  27. };
  28. componentDidMount() {
  29. this.checkAndInitiateFromLocalStorage(); 
  30. this.updateLocalStorage();
  31. }
  32. render() {
  33. return (
  34. &lt;div&gt;
  35. &lt;h3&gt;Display Data&lt;/h3&gt;
  36. &lt;ul&gt;
  37. {this.state.arr.map((obj, i) =&gt; (
  38. &lt;li key={i}&gt;
  39. {obj.name} - {obj.name}
  40. &lt;/li&gt;
  41. ))}
  42. &lt;/ul&gt;
  43. &lt;/div&gt;
  44. );
  45. }
  46. }
  47. ReactDOM.render(&lt;Application /&gt;, document.getElementById(&#39;app&#39;));

huangapple
  • 本文由 发表于 2023年2月14日 06:10:31
  • 转载请务必保留本文链接：https://go.coder-hub.com/75441681.html
  • angularjs
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定