控制台日志记录反应？

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 文件而不是 js 有关？

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

Answer 3

如果您想在 内部 JSX 中登录，您可以创建一个虚拟组件
插入您希望登录的位置：

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>