控制台记录反应？

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>