使用预标签调试-AngularJS/reactjs

Question

我在Angular js中广泛使用Pre标签，例如：

：

<pre>{{vm.names | json}}</pre>

两个问题：

1. 这在引擎盖下如何工作？

2. 是否有等效工具使用ReactJS，可以在视图中看到变量的值，而是更常见的console.logs/debuggers？

Answer 1

您可以将<pre>{JSON.stringify(this.state.data, null, 4)}</pre>添加到组件保存状态中以"可视化"视图中的数据。

Answer 2

您的<pre>标签与调试无关 - 它们只是HTML元素。

分解您的HTML标记片段中发生的事情：

• `进行一些HTML格式。
• 双卷发括号{{}}指示数据绑定。（老实说，双向）。
• vm.names是一个对象控制器（没有小提琴等，我无法布置其余的实例化的方式）
• | json告诉Angular到Filter Vm.Names使用JSON过滤器。

看起来好像React使用DOM和.render功能。看看他们的入门页面。

有关它在引擎盖下的工作方式，您可能需要阅读有关NG模型及其工作原理的信息，并且还了解Angular的$ apply（）和$ digest（）以获取AngularJS模型绑定的处理。