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

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. эту ветку, но ей не понравилось, когда я вообще попробовал эти способы. Каков правильный способ экспортировать оба из них и использовать их с моим компонентом приложения? Большое спасибо.

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


reactjs javascript function components react-router
person farmer1010    schedule 24.01.2020    source источник
comment
Поделитесь своим кодом, как вы получаете доступ к этим двум экспортам?   -  person Zohaib Ijaz    schedule 25.01.2020
comment
Я просто импортирую его в свой компонент приложения прямо сейчас, например, импортирую Sub из './Sub'. Это не позволяет мне экспортировать без использования экспорта по умолчанию, после чего я могу экспортировать только одну функцию. Итак, я думаю, мне нужно поместить функцию subValues ​​​​внутри функции Sub?   -  person farmer1010    schedule 25.01.2020
comment
Не смешивайте JSX и манипулирование ванильным DOM, вы просто напрашиваетесь на неприятности.   -  person Emile Bergeron    schedule 25.01.2020
comment
Отвечает ли это на ваш вопрос? Реагировать на событие onClick   -  person Emile Bergeron    schedule 25.01.2020
comment
Если проблема не в событии onClick, предоставьте минимально воспроизводимый пример, по крайней мере ту часть, где вы повторно пытаемся импортировать functions.   -  person Emile Bergeron    schedule 25.01.2020

Ответы (3)


arrow_upward
0
arrow_downward

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

A.js

export function myFunction() {}

B.js

import { myFunction } from './A'
person Иван Довгаль    schedule 24.01.2020

arrow_upward
-1
arrow_downward

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

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

person Zohaib Ijaz    schedule 24.01.2020

arrow_upward
-1
arrow_downward

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

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

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

import { subValues , Sub } from './youClass.js';
person Matheus Frez    schedule 24.01.2020