在反应应用程序中使用 npm 包答案

【问题标题】：using npm package in react app在反应应用程序中使用 npm 包
【发布时间】：2017-08-28 22:51:46
【问题描述】：

我有一些专门的 javascript 知识，并且正在尝试学习 react，但似乎无法找到有关如何正确使用导入的文档。具体来说，我有一个快速应用程序，可以从我设置的 api 中获取一个值，我想使用 katex 格式化数字。我使用 npm 安装了一个 react-katex 包，但说明似乎并未涵盖如何使用 webpack/jsx/whatever 来完成此操作。

更具体地说，我将如何使用该软件包？文档说要这样使用它

var BlockMath = ReactKaTeX.BlockMath;

ReactDOM.render(<BlockMath math="\\int_0^\\infty x^2 dx"/>, document.getElementById('katex-element'));

但是当我在下面的示例代码中执行此操作时，我收到一个错误，即元素 katex-element 未定义。我意识到（我认为）第一行被import 命令取代，所以我知道我不需要那个，但是我在哪里放置 BlockMath 调用来让它在 tex 中呈现数字？

这是我的示例应用程序，我尝试了一些方法，但我要么最终得到未定义的错误，要么根本没有结果：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// ?? import 'react-katex';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      number: 0
    }
  }
  componentDidMount() {
    fetch('http://localhost:4001/api/get_number')
      .then(data => data.json())
      .then(data => {
        this.setState({
          number: data.number
        })
      })
  }
  render() {
    const number = this.state.number
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
          Also <span id="katexElement">{number}</span>
        </p>
      </div>
    );
  }
}

export default App;

我觉得这里也有类似的问题：Is there a different between using an npm package in Node.js vs using it in React / webpack?

【问题讨论】：

你试过了吗，import {InlineMath, BlockMath} from 'react-katex'？
是的，我认为这会导入函数，但是你如何实际使用它们呢？这是我似乎无法弄清楚的部分。该文档似乎适用于您在标准 Web 文档中使用 react，而不是使用 jsx
您只需使用<InlineMath math="\\int_0^\\infty x^2 dx"/>。将此添加到您的 jsx.js 中。但不要忘记一件事，正如他们所说的“不要忘记导入 KaTeX CSS 文件（参见 example/index.html）。”
所以我只是将我的行 <span id="katexElement">{number}</span> 更改为 <InlineMath math="{number}"/>？我之前尝试过，没有结果，也许我只是做错了什么。
是的，这就是动机。

标签： javascript node.js reactjs

【解决方案1】：

您可以使用

导入它

import {InlineMath, BlockMath} from 'react-katex'

注意curly braces {}，它只会从库中获取指定的属性，而不是整个库。

并且可以直接在你的jsx中使用这些组件，比如：

const inlineMath = (
    <div>
        <InlineMath math="\\int_0^\\infty x^2 dx"/>
    </div>
);

注意：请不要忘记添加css。

不要忘记导入 KaTeX CSS 文件（参见 example/index.html）。

在你的 index.html 中使用它来在你的代码中导入 css。

<link rel="stylesheet" href="../node_modules/katex/dist/katex.min.css">

我建议您使用{} 大括号仅从库中获取特定属性，而不是一次加载整个库。同时也让代码更加清晰易读。

【讨论】：

【解决方案2】：

使用import {InlineMath, BlockMath} from 'react-katex' 可以让您利用InlineMath.function()。

或者，您应该能够包含

import ReactKatex from react-katex

这将允许您通过ReactKatex.subexport.function 访问整个库，其中subexport 是一个嵌套模块（例如上面示例中的InlineMath），function 是该子模块中定义的函数。

【讨论】：