Экспорт 2 разных функций в React - PullRequest
Новая
       7

Экспорт 2 разных функций в React

0 голосов
/ 25 января 2020 
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 прямо сейчас и пытаюсь создать очень простой калькулятор c с одностраничным приложением. Мне не нравится, когда я пытаюсь поместить функцию subValues ​​в функцию Sub. Я пробовал разные способы экспорта, которые были показаны в при экспорте нескольких модулей в реакцию. js в этой теме, но мне не понравилось, когда я попробовал эти способы вообще. Как правильно экспортировать и использовать оба этих компонента с моим компонентом приложения? Огромное спасибо.

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

Ответы [ 3 ]

0 голосов
/ 25 января 2020

Вы можете использовать:

A. js

export function myFunction() {}

B. js

import { myFunction } from './A'
0 голосов
/ 25 января 2020

Вы экспортируете так: 

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

И для импорта вы можете сделать это: 

import { subValues , Sub } from './youClass.js';
0 голосов
/ 25 января 2020

Вы можете экспортировать в разные строки и импортировать, как это 

// 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';
...