將JavascriptDOM函式轉換為REACTJS

我目前正在學習 React JS，并希望將我的一個 vanilla JS 專案轉換為 React。但是，我不知道將使用 JS DOM 函式的函式（我知道你不應該在 React 中使用它）轉換為更適合 REACT JS 的函式。

function getRandom(letters) {
    var randomSet = letters[Math.floor(Math.random() * letters.length)];
    //console.log("set random", randomSet);
    document.getElementById("demo3").innerHTML = randomSet;
    _timer = setTimeout(() => getRandom(letters), 1000);
  }

感謝大家的幫助！

uj5u.com熱心網友回復：

我可能會做這樣的事情。

import React, { useEffect, useState } from 'react';

const Component = () => {
  const [randomLetter, setRandomLetter] = useState();

  const getRandomLetters = (letters) => {
    const randomSet = letters[Math.floor(Math.random() * letters.length)];
    setRandomLetter(randomSet);
  }

  useEffect(() => {
      const letters = ['a', 'b', 'c'];
      const randomLetterInterval = setInterval(() => {
        getRandomLetters(letters)
      }, 1000);

      return () => {
        clearInterval(randomLetterInterval);
      }
  }, []);

  return (
    <>{randomLetter}</>
  );
};

uj5u.com熱心網友回復：

import React from "react";
import { render } from "react-dom";

class MyFirstComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { rndNum: null, offOn: true };
  }

  componentDidMount() {
    this.getRandom("Hello-React");
  }

  getRandom = (letters) => {
    var randomSet = letters[Math.floor(Math.random() * letters.length)];
    //console.log("set random", randomSet);
    this.setState({ rndNum: randomSet });
    // document.getElementById("demo3").innerHTML = randomSet;
    if (this.state.offOn) {
      setTimeout(() => this.getRandom(letters), 1000);
    }
  };

  OffOn = () => {
    this.setState({ offOn: !this.state.offOn });
    if (!this.state.offOn) {
      this.getRandom("Hello-React");
    }
  };
  render() {
    return (
      <div>
        <h2>{this.state.rndNum}</h2>
        <button onClick={this.OffOn}>Start/Stop</button>
      </div>
    );
  }
}

render(<MyFirstComponent />, document.getElementById("root"));

樣本

uj5u.com熱心網友回復：

在 React 中，狀態通知組件是如何呈現的。當狀態改變時，將執行新的渲染。

1. 更新后的隨機字母的至少一種狀態。在這個例子中，我還為要傳遞給函式的字母陣列添加了一個狀態。

2. useEffect用于setTimeout在組件初始渲染時呼叫 randomise 函式。

3. getRandom為字母設定新狀態，組件再次呈現，并顯示該字母。

const { useEffect, useState } = React;

function Example({ data }) {

  // Initialise the states
  const [ letters, setLetters ] = useState(data);
  const [ letter, setLetter ] = useState('Waiting for random letter');

  // Set the new state with a random letter
  function getRandom() {
    const rnd = Math.floor(Math.random() * letters.length);
    setLetter(letters[rnd]);
  }

  // Use a useEffect to call the function
  // on the first render
  useEffect(() => {
    const timer = setTimeout(getRandom, 1000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      <p>{letter}</p>
    </div>
  );

}

// Just creating an array of letters
const arr = Array.from(Array(26)).map((e, i) => i   65);
const letters = arr.map((x) => String.fromCharCode(x));

// Passing in that array as a component prop
ReactDOM.render(
  <Example data={letters} />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

標籤：javascript 反应 dom

上一篇：瀏覽器正在決議錯誤的HTML內容

下一篇：未捕獲的型別錯誤：無法讀取null的屬性（正在讀取“appendChild”）；持續錯誤