[React & Debug] Quick way to debug Stateless component

转载于 2017-08-30 15:44:00 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/7453446.html

文章标签：

#javascript #ViewUI

本文介绍了一种在React中使用函数组件的实例，并通过添加console.log来检查传递给组件的属性，确保正确渲染状态组件。

For example we have the following code:

const TodoList = (props) => (
  <div className="Todo-List">
    <ul>
      {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
    </ul>
  </div>
)

Because we wrote as function component, it is using the implicit return. To debug what props have been passed in. we can add console.log before the function:

const TodoList = (props) => console.log(props) || (
  <div className="Todo-List">
    <ul>
      {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
    </ul>
  </div>
)

Because console.log return "underfined", so in the end, it will also run the function to render the statless component.

转载于:https://www.cnblogs.com/Answer1215/p/7453446.html