码迷,mamicode.com
首页 > 其他好文 > 详细

React快速调试的小技巧:直接在组件上输出props/state

时间:2019-10-16 09:14:24      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:out   details   image   sea   inf   react   bsp   调试   nbsp   

以react route为例

父组件App

const App = () => (
  <BrowserRouter>
    <div className="app">
      <Switch>
        <Route exact path="/" component={Landing} />
        <Route path="/search" component={Search} />
        <Route path="/details/:id" component={Details} />
        <Route component={FourOhFour} />
      </Switch>
    </div>
  </BrowserRouter>
);

Details组件

const Details = props => (
  <div className="details">
    <pre>
      <code>
        {JSON.stringify(props, null, 4)}
      </code>
    </pre>
  </div>
);

输出效果

技术图片

 

React快速调试的小技巧:直接在组件上输出props/state

标签:out   details   image   sea   inf   react   bsp   调试   nbsp   

原文地址:https://www.cnblogs.com/zzzeto/p/11682180.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!