React 控制台日志记录

Question

我对 React 非常陌生，我正在尝试为 Meteor 设置它，并将其他来源的东西拼凑在一起。

这些其他来源之一为应用程序设置了控制台日志记录，但我要采用 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('...')

正在调用

node_modules/react-console-logger/lib/Logger.js

，其定义为

并且

this.logger

未定义，尽管我看到上面已经定义了？

我做错了什么？在我看来，这个库有问题，但也许这与我使用 JSX 文件而不是 JavaScript 有关？

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

以下是更多控制台日志记录“专业提示”：

控制台.表

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

console.table(animals);

控制台.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

Answer 3

如果您想在内部 JSX 进行日志记录，您可以创建一个虚拟组件
，将其插入您想要记录的位置：

// Some component with JSX and a logger inside
const App = () =>
  <ul>
    {[...Array(4)].map((v, i) => (
      console.log(i), <li key={i}>{i+1}</li>
      )
    )}
    {console.log(123)}
  </ul>

// Render
ReactDOM.render(<App />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

或者为了好玩，作为组件：

const Console = prop => (
  console[Object.keys(prop)[0]](...Object.values(prop))
  ,null // ➜ React components must return something
)

// Some component with JSX and a logger inside
const App = () =>
  <div>
    <p>imagine this is some component</p>
    <Console log='foo' />
    <p>imagine another component</p>
    <Console warn='bar' />
  </div>

// Render
ReactDOM.render(
  <App />,
  document.getElementById("react")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>