在 React 中導出 2 個不同的函數

Question

import React from 'react'

function subValues() {
   let num1, num2, res;
   num1 = Number(document.sub.txtnum1.value)
   num2 = Number(document.sub.txtnum2.value)
   res = num1 - num2;

   document.sub.txtres.value=res

}

function Sub() {
   return (
       <div>
           <form>
               First number:<input type="number" className="txtNum1"></input>
               Second number:<input type="number" className="txtNum2"></input>
               Result: <input className="textres"></input>
               <input type="button" value="Calculate" onClick="subValues()" ></input>

           </form>
       </div>
   )
}

export {
   Sub,
   subValues
}

我正在嘗試導出這兩個函數。 我現在正在學習如何使用 React Router，並嘗試使用單頁應用程序創建一個非常基本的計算器。 當我嘗試將 subValues 函數放在 Sub 函數中時，它不喜歡它。 我嘗試了不同的導出方式， 在 react.js這個線程中導出多個模塊中顯示了這一點，但是當我嘗試這些方式時它根本不喜歡它。 將這兩個導出並與我的 App 組件一起使用的正確方法是什么？ 非常感謝。

ps 我確實知道我在這里寫的代碼可能不起作用，而且可能是非常錯誤的。 我剛剛輸入了所有這些，並試圖能夠測試我的代碼，但直到我可以使用這兩個功能時才能測試

Answer 1

您可以使用：

js

export function myFunction() {}

js

import { myFunction } from './A'

Answer 2

您可以在不同的行上導出並像這樣導入

 // Sub.js import React from 'react' export function subValues() { // content } export function Sub() { // content } // and where you want to import this, App.js import { Sub, subValues } form './Sub';

Answer 3

你這樣導出：

export const subValues = () => {}
export const Sub= () => (<div> ... </div>);

要導入，您可以執行以下操作：

import { subValues , Sub } from './youClass.js';