在 JSX 代码中可以加入 console.log 吗？ #5288

EmilyQiRabbit · 2019-03-01T07:36:35Z

译文翻译完成，resolve #5262

noahziheng · 2019-03-01T07:39:42Z

校对认领 @fanyijihua

fanyijihua · 2019-03-01T07:39:44Z

@noahziheng 好的呢 🍺

noahziheng

Great! 一些小的流畅性方面的建议，供参考。
校对完成 @EmilyQiRabbit @leviding

noahziheng · 2019-03-01T07:40:58Z

TODO1/can-you-console-log-in-jsx.md


 ![](https://cdn-images-1.medium.com/max/2000/1*OIfGKWZBZRsvKQZxQtr3Yw.jpeg)

-As a coding instructor, I have seen many students trying this:
+作为一名编程老师，我曾看到过我的学生尝试这样写代码：


「尝试这样写代码」=>「写出了这样的代码」

noahziheng · 2019-03-01T07:41:21Z

TODO1/can-you-console-log-in-jsx.md

@@ -24,13 +24,13 @@ render() {
 }
 ```

-This will not print the expected list in the console. It will just render the string *console.log(this.props.todos)* in the browser.
+这样写不会在控制台打印出期望的内容。而是在浏览器上渲染出 **console.log(this.props.todos)** 字符串。


「字符串」=>「这个字符串」

noahziheng · 2019-03-01T07:41:52Z

TODO1/can-you-console-log-in-jsx.md


-Let’s first take a look at some solutions which are very straightforward, then we will explain the reason.
+我们先来看一些很直观的解决方案，然后我们将会解释原因。


「原因」=>「原理」

「直观」=>「直接」

看了下后面的解觉方案，感觉都是那种很直截了当的方法，感觉翻译为“直接”会不会更符合语境。

noahziheng · 2019-03-01T07:42:37Z

TODO1/can-you-console-log-in-jsx.md


-Ultimately, JSX gets compiled into vanilla JavaScript.
+最后，JSX 会被编译成原生 JavaScript。


「最后，JSX 会被编译成原生」=>「最终，JSX 将会被编译成原生」

noahziheng · 2019-03-01T07:44:03Z

TODO1/can-you-console-log-in-jsx.md


-Let’s now review the failing console.log that we tried to write at the start of this article:
+我们现在来回顾一下文章开始的时候写的运行失败的 console.log：


「运行失败」=>「失败」
没有运行报错啥的，只是和预想不一致的结果

noahziheng · 2019-03-01T07:44:14Z

TODO1/can-you-console-log-in-jsx.md


-* `'h1'`: This is the name of the tag, as a string
+* `'h1'`：它是标签名，是一个字符串类型


去除「它是」

noahziheng · 2019-03-01T07:44:32Z

TODO1/can-you-console-log-in-jsx.md


-* `{ className: 'greeting' }`: These are the props used in `<h1>` . It is converted to an object. The key of the object is the name of the prop and the value, its value.
+* `{ className: 'greeting' }`：它是 `<h1>` 的属性。它会被转换成一个对象。对象的键就是属性名，对象的键值就是属性的值。


去除「它是」

noahziheng · 2019-03-01T07:45:10Z

TODO1/can-you-console-log-in-jsx.md


 ```jsx
-// when more than 1 thing is passed in, it is converted to an array
+// 当多于一个元素被传递进去，第三个参数将会变成一个数组


「多于一个」=>「一个以上的」

noahziheng · 2019-03-01T07:45:38Z

TODO1/can-you-console-log-in-jsx.md

      'List of todos',
    ),
    'console.log(this.props.todos)'
  ]
 );
 ```

-See how the `console.log` is passed as a string to `createElement`. It is not executed.
+`console.log` 被当成一个数组传递到了方法 `createElement`。它并没有被执行。


「被当成一个数组」=>「被当成一个字符串」

henry-fun · 2019-03-01T08:10:06Z

@leviding 校对认领

fanyijihua · 2019-03-01T08:10:07Z

@hanxiansen 妥妥哒 🍻

henry-fun

翻译得很好，提了一点小建议。
@EmilyQiRabbit @leviding 校对完成

henry-fun · 2019-03-01T11:38:25Z

TODO1/can-you-console-log-in-jsx.md


-Let’s first take a look at some solutions which are very straightforward, then we will explain the reason.
+我们先来看一些很直观的解决方案，然后我们将会解释原因。


「直观」=>「直接」

看了下后面的解觉方案，感觉都是那种很直截了当的方法，感觉翻译为“直接”会不会更符合语境。

henry-fun · 2019-03-01T11:43:20Z

TODO1/can-you-console-log-in-jsx.md


-We have to remember that JSX is not vanilla JavaScript, nor is it HTML. It is a syntax extension.
+我们必须记住，JSX 不是原生的 JavaScript，也不是 HTML。它是一种语法扩展。


「我们必须记住，」 =>「我们必须记住：」

EmilyQiRabbit · 2019-03-02T02:12:00Z

@noahziheng @hanxiansen 感谢校对

EmilyQiRabbit · 2019-03-02T02:12:31Z

@leviding 修改完成

leviding · 2019-03-02T04:09:42Z

@EmilyQiRabbit 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

Update can-you-console-log-in-jsx.md

7f0bfdf

fanyijihua added the 校对认领 label Mar 1, 2019

fanyijihua mentioned this pull request Mar 1, 2019

在 JSX 代码中可以加入 console.log 吗？ #5262

Closed

EmilyQiRabbit changed the title ~~Update can-you-console-log-in-jsx.md~~ 在 JSX 代码中可以加入 console.log 吗？ Mar 1, 2019

noahziheng added the 前端 label Mar 1, 2019

fanyijihua added the 正在校对 label Mar 1, 2019

noahziheng reviewed Mar 1, 2019

View reviewed changes

fanyijihua removed the 校对认领 label Mar 1, 2019

henry-fun reviewed Mar 1, 2019

View reviewed changes

leviding added the enhancement 等待译者修改 label Mar 1, 2019

Update can-you-console-log-in-jsx.md

5a14fe2

leviding added 标注待管理员 Review and removed enhancement 等待译者修改 labels Mar 2, 2019

leviding approved these changes Mar 2, 2019

View reviewed changes

leviding merged commit 8ffaa74 into xitu:master Mar 2, 2019

leviding added 翻译完成 and removed 标注待管理员 Review 正在校对 labels Mar 2, 2019

EmilyQiRabbit deleted the translation/can-you-console-log-in-jsx branch June 19, 2019 06:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

在 JSX 代码中可以加入 console.log 吗？ #5288

在 JSX 代码中可以加入 console.log 吗？ #5288

EmilyQiRabbit commented Mar 1, 2019

noahziheng commented Mar 1, 2019

fanyijihua commented Mar 1, 2019

noahziheng left a comment •

edited

Loading

noahziheng Mar 1, 2019

noahziheng Mar 1, 2019

noahziheng Mar 1, 2019

henry-fun Mar 1, 2019

noahziheng Mar 1, 2019

noahziheng Mar 1, 2019

noahziheng Mar 1, 2019

noahziheng Mar 1, 2019

noahziheng Mar 1, 2019

noahziheng Mar 1, 2019

henry-fun commented Mar 1, 2019

fanyijihua commented Mar 1, 2019

henry-fun left a comment

henry-fun Mar 1, 2019

henry-fun Mar 1, 2019

EmilyQiRabbit commented Mar 2, 2019

EmilyQiRabbit commented Mar 2, 2019

leviding commented Mar 2, 2019


		Let’s first take a look at some solutions which are very straightforward, then we will explain the reason.
		我们先来看一些很直观的解决方案，然后我们将会解释原因。


		Ultimately, JSX gets compiled into vanilla JavaScript.
		最后，JSX 会被编译成原生 JavaScript。


		Let’s now review the failing console.log that we tried to write at the start of this article:
		我们现在来回顾一下文章开始的时候写的运行失败的 console.log：


		* `'h1'`: This is the name of the tag, as a string
		* `'h1'`：它是标签名，是一个字符串类型


		* `{ className: 'greeting' }`: These are the props used in `<h1>` . It is converted to an object. The key of the object is the name of the prop and the value, its value.
		* `{ className: 'greeting' }`：它是 `<h1>` 的属性。它会被转换成一个对象。对象的键就是属性名，对象的键值就是属性的值。


		We have to remember that JSX is not vanilla JavaScript, nor is it HTML. It is a syntax extension.
		我们必须记住，JSX 不是原生的 JavaScript，也不是 HTML。它是一种语法扩展。

在 JSX 代码中可以加入 console.log 吗？ #5288

在 JSX 代码中可以加入 console.log 吗？ #5288

Conversation

EmilyQiRabbit commented Mar 1, 2019

noahziheng commented Mar 1, 2019

fanyijihua commented Mar 1, 2019

noahziheng left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

henry-fun commented Mar 1, 2019

fanyijihua commented Mar 1, 2019

henry-fun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EmilyQiRabbit commented Mar 2, 2019

EmilyQiRabbit commented Mar 2, 2019

leviding commented Mar 2, 2019

noahziheng left a comment •

edited

Loading