如何在我的React应用程序中使用猪拉丁语翻译器npm模块

我需要编写一个React / Redux应用程序来将英文句子翻译成Pig Latin。 我发现有一些已经存在的npm 模块用于这个目的,因此想到重用它们。 我为这个翻译写了一个简单的function组件,如下所示。

import _ from 'lodash'; import React from 'react'; import piglatin from 'piglatin'; function convertToPigLatin(data){ // https://www.npmjs.com/package/piglatin // return pigLatin(data); } export default (props) => { console.log(props.data); console.log(piglatin('hello there')); // Works fine console.log(piglatin(props.data)); // gives an ERROR return ( <label>Hello !</label> ) } 

简单地说,我只是想将翻译后的文本logging到控制台中,但是当我尝试这个function后,在根据下面的答案更改硬编码文本后可以正常工作。

 console.log(piglatin('hello there')); // Works fine 

但是当我传递真实的数据时,它给我这个错误失败。

 console.log(piglatin(props.data)); // gives an ERROR Uncaught TypeError: Cannot read property 'split' of null at piglatin 

我认为这个错误发生是因为我们错过了文本。最后,我能够通过使用ES6 back-tick操作符来解决这个问题,如下所示。

 console.log(piglatin(`${props.data}`)); // This solved the issue 

你可以在github中find我的代码。 我怎样才能解决这个问题。 任何帮助真的很感激。

后来,我发现还有一个npm模块用于同样的目的,这也是一个很酷的模块 。 两者都给你相同的结果,因此你可以使用其中任何一个。 代码有一些细微差别,我已经在下面发布了。

 import pigLatin from 'piglatin'; export const PIG_LATIN = 'PIG_LATIN'; export function pigLatinConvert(input){ console.log(input); const output = pigLatin(`${input.inputtext}`); console.log(output); return { type: PIG_LATIN, payload: output }; } 

Solutions Collecting From Web of "如何在我的React应用程序中使用猪拉丁语翻译器npm模块"