在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，并尝试使用Single Page Application创建一个非常基本的计算器。当我尝试将subValues函数放在Sub函数内部时，它不喜欢它。我已经尝试了该线程在exporting multiple modules in react.js中显示的不同导出方式，但是当我尝试这些方式时，它完全不喜欢它。使这两项都导出并与我的App组件一起使用的正确方法是什么？非常感谢。

ps.s。我确实知道，我在此处编写的代码可能无法正常工作，并且可能完全错误。我只是输入了所有这些内容，并试图能够测试我的代码，但是直到我可以同时使用这两个函数时，才能这样做

Answer 1

您可以在不同的行上进行导出，并且可以像这样进行导入

// 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 2

您可以使用：

A.js

export function myFunction() {}

B.js

import { myFunction } from './A'

Answer 3

您这样导出：

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

要导入，您可以执行此操作：

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