在客戶端導入npm模塊React組件

Question

在Meteor中，如果我在反應組件和console.log中輸入nod這樣的npm，在以下位置輸入「lodash」，它總是會在組件中定義爲undefined。同樣的事情也發生在一瞬間。我在我的智慧結束，因爲從文檔說什麼我認爲這是可能的。這是可能的，如果有的話，我在這裏錯過了什麼？任何幫助深表感謝。

import React from 'react' 
import lodash from 'lodash' 

console.log(lodash) // lodash is found just fine 

export default class SomeComponent extends React.Component { 
    constructor(props) { 
     super(props) 
     this.someFunction = this.someFunction.bind(this) 
    } 
    someFunction() { 
     console.log(lodash) // Throws error that lodash is undefined. 
    } 
} 

Answer 1

我把你的組件放到流星的例子中，它工作的很好。

例如

git clone https://github.com/meteor/simple-todos-react 
cd simple-todos-react 
npm i 
npm i --save lodash 
meteor 

然後添加以下/imports/ui/App.jsx在此DIFF：

import { Tasks } from '../api/tasks.js';       
import Task from './Task.jsx';             
import AccountsUIWrapper from './AccountsUIWrapper.jsx';       

+import lodash from 'lodash'              
+console.log(lodash) // lodash is found just fine         
+                     
+export default class SomeComponent extends React.Component {      
+ constructor(props) {               
+  super(props)                
+  this.someFunction = this.someFunction.bind(this)       
+ }                   
+ someFunction() {                
+  console.log(lodash) // Throws error that lodash is undefined.  
+ }                   
+ render() {                 
+  this.someFunction()              
+  return (                 
+  <h2>SomeComponent</h2>             
+  )                   
+ }                   
+}                    

.... 

class App extends Component { 
.... 
    render() { 
    return (
     <div className="container"> 
     <header> 
+   <SomeComponent /> 
      <h1>Todo List ({this.props.incompleteCount})</h1> 

.... 

打開網站瀏覽器，並檢查控制檯日誌：