我无法让此代码为我的项目工作？

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