如何在我的 React 应用程序中使用 pig latin translator npm 模块

Question

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

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>
  )
}

简单地说，我只是想将翻译后的文本记录到 console.But 中，当我尝试它时，它适用于按照以下答案更改后的硬编码文本。

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

我认为发生此错误是因为我们在 text.Finally 周围缺少 '' 我能够通过使用 ES6 反引号运算符解决问题，如下所示。

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

您可以在 github 中找到我的代码 here。我该如何解决这个问题。非常感谢任何帮助。

后来，我发现还有一个npm module同样的用途，也很酷。两者都给你相同的结果，因此你可以使用它们中的任何一个。代码略有不同，我已将其发布在下面。

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
  };
}

Answer 1

查看该模块的文档看起来应该是

console.log(piglatin(props.data));

没有

console.log(piglatin.piglatin(props.data));

如何在我的 React 应用程序中使用 pig latin translator npm 模块

How to use a pig latin translator npm module inside my React app

node.js

reactjs

redux

react-redux