Невозможно отобразить дроби в проекте React.Дочерняя ошибка вместо этого даже с mathjs - PullRequest
Новая
       63

Невозможно отобразить дроби в проекте React.Дочерняя ошибка вместо этого даже с mathjs

0 голосов
/ 22 октября 2018

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

export const ingredients = [
{
    id: 1,
    name: 'rice wine vinegar (or sub apple cider vinegar)',
    category: 'Pickled Vegetables',
    portion: 2/3,
    unit: 'cup',
},

После исследования я обнаружил модуль npm mathjs и загрузилон пытается решить мою проблему.

Однако после добавления этого кода (который, кажется, работает самостоятельно) 

const math = require('mathjs')

math.config({
     number: 'Fraction'
})

А затем этот код 

export const ingredients = [
{
    id: 1,
    name: 'rice wine vinegar (or sub apple cider vinegar)',
    category: 'Pickled Vegetables',

//portion value has changed
    portion: math.fraction(`2/3`),
    unit: 'cup',
},

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

На основании чегоЯ видел с сайта, казалось, что не иметь этого значения в массиве было совершенно нормально.

Я также пытался поместить / in '', но это не было принято VS Code 

portion: 2'/'3,

Текстовый редактор объяснил, что это был неправильный синтаксис, и теперь я в растерянности.

Что не так с моим кодом, и я на правильном пути для работы с дробями?

1 Ответ

0 голосов
/ 22 октября 2018

Это потому, что вы выполняете только половину форматирования ...

Попробуйте: 

/* for readability let's declare two thirds first */
const twoThirds = math.format(math.fraction('2/3'), { fraction: 'ratio' })

export const ingredients = [
{
    id: 1,
    name: 'rice wine vinegar (or sub apple cider vinegar)',
    category: 'Pickled Vegetables',

//portion value has changed
    portion: twoThirds,
    unit: 'cup',
},

На странице примера MathJ показаны все параметры дроби

...