如何在我的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 }; }
看看这个模块的文档看起来应该是这样的
console.log(piglatin(props.data));
不
console.log(piglatin.piglatin(props.data));