反應腳本不返回 function

Question

所以我有一個 react-js 腳本，我有一個 core/main.js 和主 app.js 文件。

main.js 中的數據不會出現在 app.js 中的“歡迎”div 中——當我調用應該觸發它的 function 時。

main.js

import React from 'react';
import ReactDOM  from 'react-dom';


export default function tick() {
    const element = (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
      </div>
    );
    // highlight-next-line
    ReactDOM.render(element, document.getElementById('welcome'));
  }

應用程序.js

import React from 'react';
import tick from './core/Main.js'
//import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">


          <div id="welcome"></div>
          {tick}

      </header>
    </div>
  );
}

export default App;

我怎樣才能讓這個顯示？ 我試圖更好地理解這種類型的功能。

Answer 1

你應該把你的tick記號變成一個組件（例如，記號，只是為了正確命名）：

export default function Tick() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
}

如果你這樣做了，你就可以像使用任何其他 React 組件一樣使用它：

import React from "react";
import Tick from "./core/Main.js";
//import logo from './logo.svg';
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div id="welcome">
          <Tick />
        </div>
      </header>
    </div>
  );
}

export default App;

如果您想堅持使用 Tick 作為 function 的原始方式（例如，如果您有一些特殊要求），您需要在某個地方實際調用 function，最好是在 App 的初始渲染之后，在 useEffect 內：

import React from "react";
import tick from "./core/Main.js";
//import logo from './logo.svg';
import "./App.css";

function App() {
  React.useEffect(() => {
    tick();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <div id="welcome"></div>
      </header>
    </div>
  );
}

export default App;