控制台日志记录以做出反应？

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

这里还有一些控制台日志记录 "pro tips":

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’);

如果您真的想升级，请不要局限于控制台语句。

这里有一篇很棒的 post，介绍了如何将 chrome 调试器直接集成到您的代码编辑器中！

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

Answer 3

如果你想在 inside 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>

控制台日志记录以做出反应？

Console logging for react?

javascript

logging

jsx

meteor

reactjs

如果你想在 inside JSX 中记录，你可以创建一个虚拟组件
插入你想记录的地方：

控制台日志记录以做出反应？

Console logging for react?

javascript

logging

jsx

meteor

reactjs

如果你想在 inside JSX 中记录，你可以创建一个虚拟组件 插入你想记录的地方：

如果你想在 inside JSX 中记录，你可以创建一个虚拟组件
插入你想记录的地方：