Измените h1 внутри файла TSX, используя функцию javascript в файле js

Question

Мне нужно генерировать случайные подсказки внутри элемента H1 в моем файле TSX. Я искал решения, касающиеся этого, и все они указывают на то, чтобы сделать это в моем файле индекса. html, но у меня его нет, и я не думаю, что он мне нужен для создаваемого приложения.

Вот код, который у меня есть, Javascript file:

export function NewPrompt() {
var prompts = [
    "one",
    "2",
    "three"
]
var randomNumber = Math.floor(Math.random() * prompts.Length);
var theText = document.getElementById('PromptDisplay').innerHTML;
return(
 theText = randomNumber
);
}

Вот файл TSX:

import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCardHeader, IonCard, IonCardContent } from '@ionic/react';
import './RandomPrompts';
import './Tab2.css';
import AddItem from '../AddItem';
import ItemList from '../ItemList';
import { mic } from 'ionicons/icons';
import { NewPrompt } from './RandomPrompts';
import { analytics } from 'firebase';
const Tab2: React.FC = () => {

  const [current, setCurrent] = useState(null);

      const getEmpty = () => {
        return ({
      title: '',
      content: '',
      date: '',
      location:'',
      clear: '',
      initialValue: ''
    });


  }

  var random = require('./RandomPrompts.js');
  const GetRandPrompt = () => {
    return ({
      random: NewPrompt()
    })
  }

  return (

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Writer's Unblock</IonTitle>
    </IonToolbar>
  </IonHeader>

  <IonContent>
    <IonCard>
    <IonCardHeader>
      <div id="PromptHolder">
        <h1>Prompt: </h1>

          <h2 id="PromptDisplay" onLoad={GetRandPrompt}></h2>
      </div>
      <br />
      <h3>New Entry:</h3>
      <AddItem title={current} clear={() =>setCurrent(getEmpty())}/>
    </IonCardHeader>
    <IonCardContent>

    </IonCardContent>
    {}
    </IonCard>
  </IonContent>
</IonPage>

  );
};

export default Tab2;

Что я здесь не так делаю? Я не получаю ошибок. Я также на 100% новичок в ioni c и реагирую, и так как мой профессор не сказал нам, как делать что-либо, я боюсь, что сам по себе прошу вас, ребята, о помощи. Все, что вы можете предложить, будет оценено !!!

Answer 1

Просматривая ваш код, я вижу, что ваш NewPromt импортирован в tsk. Вы снова вызываете его с помощью require в var random и устанавливаете для него NewPromt в getRandPromt. Я не знаю, почему вы использовали это. Я предлагаю импортировать новое приглашение, например,

import NewPromt from './RandomPromt.js'

и использовать его, например,

<h2 id='PromtDisplay'><NewPromt/></h2>

. Проверить фактические имена файлов и их орфографию. Извините, на сотовом устройстве.

Answer 2

Я исправил это. Хитрость заключалась в том, чтобы поместить его в мой файл AddItem, который добавляет элементы в базу данных.

Answer 3

это не ТОЧНЫЙ код, но он должен отправить вас в правильном направлении

• https://reactjs.org/docs/hooks-state.html
• https://reactjs.org/docs/hooks-effect.html

const [prompt, setPrompt] = useState("");

useEffects(()=>{
  let prompts = ["one", "2",  "three" ]
  let randomNumber = Math.floor(Math.random() * prompts.Length);
  setPrompt(prompts[randomNumber])
})

// in template
<h2 id="PromptDisplay">{prompt}</h2>