Как получить значение конфигурации в href как строку вместо объекта object

Question

У меня есть настройка файла конфигурации, которая экспортирует кучу значений ...

const dev = {
    ...,
    someRandomLink: 'https://google.com'
}
const config = process.env.REACT_APP_STAGE === 'production' ? prod : dev;
export default {
   ...config
}

Затем я импортирую этот файл и пытаюсь использовать значение для href, но он выдает [Object object].

import someRandomLink from '../constants/config';


...
<a href={someRandomLink}... 

Как правильно извлечь эту конфигурационную переменную в виде строки для ссылки?

Answer 1

Вы экспортируете объект, который содержит someRandomLink как свойство.

Когда вы импортируете экспорт по умолчанию, вы импортируете весь объект и присваивает ему имя вместо импорта указанного свойства c. .

Попробуйте использовать это так

import { someRandomLink } from '../constants/config';

...
<a href={someRandomLink}...

или как это возможно, также:

import config from '../constants/config';

...
<a href={config.someRandomLink}...

Answer 2

export default {
   ...config
}

Итак, вы пытаетесь экспортировать объект по умолчанию (я думаю, это не конфигурация, это dev). Есть 2 способа экспортировать некоторую информацию из файла:

1) export default myFunction это импорт одного метода / объекта / любого значения, которое вы хотите сделать. Затем импортировать его так же просто, как import myFunction from './myFile'. Так как это экспорт по умолчанию, вы можете назвать его так: wi sh: import Hello from './myFile' также будет работать.

2) export {myFunction} это способ импортировать его как модуль, а не как дефолт. С помощью этой техники вы можете импортировать несколько функций, таких как export {myFunction, myOtherFunction, myAwesomeThirdFunction}. Способ его импортировать - это как import {myFunction} from './myFile'.

В вашем случае у вас есть смешение между настройками по умолчанию и экспортом модуля. Мое предложение будет следующим:

const config = { // I corrected this dev variable name
    ...,
    someRandomLink: 'https://google.com'
}

export {config}

import {config} from '../constants/config';

...
<a href={config.someRandomLink}... 

Обратите внимание, что, поскольку вы экспортировали метод, вам необходимо получить доступ к этому свойству. В противном случае вы попытаетесь сделать что-то вроде:

<a href={{someRandomLink: 'myUrl.com', otherProperties: 'otherProperties'}}... 

Так что это не сработает.