Регистрация консоли для реагирования?

Я супер новичок в 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 есть undefined, хотя я вижу, что он определен выше?

Кто-нибудь знает, что я делаю неправильно? Мне кажется, что в библиотеке это неправильно, но, возможно, это имеет какое-то отношение ко мне, используя JSX файлы вместо js?

Ответы

Ответ 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>
    )
  }
}

Не нужно устанавливать эти пакеты только для ведения журнала консоли.

Ответ 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’);

Если вы действительно хотите повышать уровень, не ограничивайте себя самим консольным выражением.

Вот отличная статья о том, как вы можете интегрировать хром-отладчик прямо в ваш редактор кода!

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

Ответ 3

Если вы хотите войти в JSX, вы можете создать фиктивный компонент
, который подключается туда, куда вы хотите войти:

const Console = prop => (
  console[Object.keys(prop)[0]](...Object.values(prop))
  ,null // <- React components whichs renders nothing should return "null"
)

// 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")
)