我無法讓此代碼為我的項目工作？

Question

我對編碼還是個新手，我正在做一個項目，我似乎無法讓它發揮作用。 當從主頁點擊它應該把你送到一個不同的頁面並給你一個隨機的財富，但我得到的只是一個空白頁面。

import React from "react";

{/* <h1 id="fortune-holder" class="fade-animation">What is your fortune?</h1> */}
<body>
<h1 id="cookie" class="fade-animation">What is your fortune?</h1>
</body>


var fortunesArray = [
    "An exciting opporunity lies ahead",
    "A long time friend will brirng wise advice in the coming week",
    "You will find great fortunes in unexpected places",
    "Never give up... Unless you want to thats cool too",
    "111",
    "222",
    "333",
    "444",
    "Maybe a nap is what you need",
    "Don't Text Your EX!"

];



function getFortune() {
    var randomFortune = fortunesArray [
        Math.floor(Math.random()*fortunesArray.length)
    ];

console.log(randomFortune);

var fortuneHolder = document.getElementById("cookie");

fortuneHolder.innerHTML = randomFortune;

fortuneHolder.classList.remove("fade-animation");

void fortuneHolder.offsetWidth;

fortuneHolder.classList.add("fade-animation");


}

Answer 1

這里發生了很多事情：

您需要將您的 JSX（看起來像 HTML）放入渲染函數（如果使用 React.Component）或放入“返回”（如果只使用功能組件）。

看看它是如何構建的：

import React from "react";

class Fortune extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        fortunes: [
            "An exciting opporunity lies ahead",
            "A long time friend will brirng wise advice in the coming week",
            "You will find great fortunes in unexpected places",
            "Never give up... Unless you want to thats cool too",
            "111",
            "222",
            "333",
            "444",
            "Maybe a nap is what you need",
            "Don't Text Your EX!"
        ],
        fortune: ""
    }
}

componentDidMount() {
    this.getFortune();
}

getFortune = () =>  {
    let rand = Math.floor(Math.random() * (this.state.fortunes.length) + 0)
    console.log(rand);
    this.setState({
        fortune: this.state.fortunes[rand]
    })
}

render() {
    return (
        <div>
            {/* <h1 id="fortune-holder" class="fade-animation">What is your fortune?</h1> */}
            <h1 id="cookie" className="fade-animation">What is your fortune?</h1>
            <h5>{this.state.fortune}</h5>
        </div>
    )
}
}

export default Fortune;

這是一個 React 組件的示例 - 看看它如何在其中包含函數“getFortune”。 componentDidMount 是一個帶有 react 的特殊函數，它在組件安裝時運行。 所以這會調用 getFortune()，然后它會調整狀態。

使用隨機命運設置狀態后，render() 函數將返回初始 H1 標簽下方的隨機命運。

Answer 2

在 vanialla Js 中，只需添加setInterval即可頻繁更新（此處為每 2 秒一次）。 您也可以嘗試在單擊某些按鈕時調用 getFortune。

 var fortunesArray = [ "An exciting opporunity lies ahead", "A long time friend will brirng wise advice in the coming week", "You will find great fortunes in unexpected places", "Never give up... Unless you want to thats cool too", "111", "222", "333", "444", "Maybe a nap is what you need", "Don't Text Your EX!", ]; function getFortune() { var randomFortune = fortunesArray[Math.floor(Math.random() * fortunesArray.length)]; console.log(randomFortune); var fortuneHolder = document.getElementById("cookie"); fortuneHolder.innerHTML = randomFortune; fortuneHolder.classList.remove("fade-animation"); void fortuneHolder.offsetWidth; fortuneHolder.classList.add("fade-animation"); } setInterval(getFortune, 2000);

 <h1 id="cookie" class="fade-animation">What is your fortune?</h1>

我無法讓此代碼為我的項目工作？

問題描述

1 個解決方案

解決方案1
1 2021-10-28 05:11:59

解決方案2
0 2021-10-28 05:36:13

我無法讓此代碼為我的項目工作？

問題描述

1 個解決方案

解決方案1 1 2021-10-28 05:11:59

解決方案2 0 2021-10-28 05:36:13

解決方案1
1 2021-10-28 05:11:59

解決方案2
0 2021-10-28 05:36:13