在 React 中导出 2 个不同的函数答案

【问题标题】：Exporting 2 different functions in React在 React 中导出 2 个不同的函数
【发布时间】：2020-05-11 06:29:57
【问题描述】：

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 函数中时，它不喜欢它。我尝试了不同的导出方式，如exporting multiple modules in react.js 这个线程中所示，但是当我尝试这些方式时它根本不喜欢它。什么是让这两个导出并与我的 App 组件一起使用的正确方法？非常感谢。

附言我确实知道我在这里编写的代码可能无法正常工作，而且可能大错特错。我刚刚输入了所有这些，并试图能够测试我的代码，但在我可以使用这两个函数之前无法测试

【问题讨论】：

分享你的代码你是如何访问这两个导出的？
我现在只是在我的 App 组件中导入它，比如从 './Sub' 导入 Sub。它不允许我在不使用“导出默认值”的情况下导出，然后我只能导出一个功能。所以我想我需要将 subValues 函数放在 Sub 函数中？
不要混合 JSX 和 vanilla DOM 操作，你只是在自找麻烦。
这能回答你的问题吗？ React onClick event
如果问题不是onClick 事件，请提供minimal reproducible example，至少是您尝试导入函数的部分。

标签： javascript reactjs function react-router components

【解决方案1】：

你可以使用：

A.js

export function myFunction() {}

B.js

import { myFunction } from './A'

【讨论】：

【解决方案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';

【讨论】：

【解决方案3】：

你这样导出：

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

要导入，您可以这样做：

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

【讨论】：