javascript - 无法在 React 项目中显示分数。即使使用 mathjs 也会出现子错误

Question

我想创建自己的食谱转换器，并且需要部分量的测量值，例如分数的杯子和茶匙。当我尝试将这些作为部分插入到对象中时，如下所示，它在网页上显示小数而不是所需的比率。

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',
},

这是我从模块的 website 的分数示例中复制的我收到此对象不是有效的 React 子项的错误消息，我需要使用数组来代替。

根据我从网站上看到的内容，似乎在数组中没有这个值是完全可以的。

我也尝试将/放在 '' 中，但 VS Code 不接受它

portion: 2'/'3,

文本编辑器解释说这是不正确的语法，现在我不知所措。

我的代码有什么问题，我是否在正确的轨道上处理分数？

Answer 1

这是因为你只做了一半的格式化......

试试这个:

/* 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',
},

The MathJs example page shows all fraction options