反応のコンソールロギング？

Question

私はリアクトの新人です。メテオとそれを他のソースから一緒につなぎとめようとしています。これらの他のソースの1つは、アプリケーションのコンソールロギングを設定しますが、私はES6/JSXの方法を使用していますので、コードを使用するだけでは機能しません（そうでないようです）。

私は、ロギングが見つかり、一部のコードは

import Logger from 'simple-console-logger'; 
Logger.configure({level: 'debug'}); 

ですが、私は、私も無駄にreact-loggerとreact-console-loggerを使用してみました。このエラー

を見ています。後者のコードは次のとおりです。

import {Logger, ConsoleLogger} from 'react-console-logger'; 
const myLogger = new Logger(); 
export default class App extends Component { 
    render() { 
     myLogger.info('something witty'); 
    } 
} 

しかし、myLogger.info('...')は、私はそれは、上で定義され参照が、それは

そしてthis.loggerとして定義されていnode_modules/react-console-logger/lib/Logger.jsへの呼び出しは、未定義で作っていますか？

誰かが間違っていることを知っていますか？ライブラリが間違っているように見えますが、jsの代わりにJSXファイルを使って私と何か関係があるのでしょうか？

Answer 1

あなただけのコンソールロギング後にしている場合は、ここで私がしたいものです。

export default class App extends Component { 
    componentDidMount() { 
    console.log('I was triggered during componentDidMount') 
    } 

    render() { 
    console.log('I was triggered during render') 
    return ( 
     <div> I am the App component </div> 
    ) 
    } 
} 

はちょうどコンソールロギングを行うためにこれらのパッケージを全く必要とすべきではありません。ここで

Answer 2

は、いくつかのより多くのコンソールロギング "プロのヒント" です：

console.table

var animals = [ 
    { animal: 'Horse', name: 'Henry', age: 43 }, 
    { animal: 'Dog', name: 'Fred', age: 13 }, 
    { animal: 'Cat', name: 'Frodo', age: 18 } 
]; 

console.table(animals); 

console.trace

はあなたにコールスタックを表示しますコンソールにつながるためのものです。

あなたも、あなたが本当にコンソール声明にあなたの自己を限定するものではなくレベルアップしたい場合は、それらが

console.todo = function(msg) { 
    console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘); 
} 

console.important = function(msg) { 
    console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘); 
} 

console.todo(“This is something that’ s need to be fixed”); 
console.important(‘This is an important message’); 

を目立たせるためにあなたのコンソールをカスタマイズすることができます。

ここでは、コードエディタにChromeデバッガを組み込む方法についての素晴らしい記事を掲載しています。

https://hackernoon.com/debugging-react-like-a-champ-with-vscode-66281760037