作为一名编程教师,我见过许多学生尝试这样做:
render() {
return (
<div>
<h1>List of todos</h1>
console.log(this.props.todos)
</div>
);
}
这不会在控制台中打印预期的列表。它只会在浏览器中渲染一个字符串 console.log(this.props.todos)。
我们先来看看一些非常简单的解决方案,然后我们将解释原因。
在JSX中嵌入表达式:
render() {
return (
<div>
<h1>List of todos</h1>
{ console.log(this.props.todos) }
</div>
);
}
把 console.log 放在 return() 前面
render() {
console.log(this.props.todos);
return (
<div>
<h1>List of todos</h1>
</div>
);
}
直接写一个 <ConsoleLog> 组件
const ConsoleLog = ({ children }) => {
console.log(children);
return false;
};
使用方法:
render() {
return (
<div>
<h1>List of todos</h1>
<ConsoleLog>{ this.props.todos }</ConsoleLog>
</div>
);
}
我们需要记住 JSX 并不是普通的 JavaScript,也不是 html,而是一种语法扩展。
最终 JSX 会被编译成普通的 JavaScript
比方说,我们写一段如下 JSX 代码:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
他会被编译成下面这样:
const element = react.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
我们先来回顾一下 React.createElement 的几个参数:
现在让我们回顾一下我们在本文开头尝试编写的失败的 console.log:
<div>
<h1>List of todos</h1>
console.log(this.props.todos)
</div>
将被编译成:
// when more than 1 thing is passed in, it is converted to an array
React.createElement(
'div',
{}, // no props are passed/
[
React.createElement(
'h1',
{}, // no props here either
'List of todos',
),
'console.log(this.props.todos)'
]
);
我们看到 console.log 被认为是一个字符串,插入到 createElement 方法中去。这段代码并没有被执行
这是有道理的,看我们代码上头有个 h1 标签,代表着 title。那么计算机是如何知道哪些字符串需要被执行,哪些是需要被直接渲染的呢?
答案是:它认为两者都是一个字符串。在任何时候,它始终将文本视为字符串。
因此,如果您希望执行该操作,则需要指定JSX来执行此操作。通过将其作为表达式嵌入 {} 。
就是这样,好了现在你知道应该在什么地方、什么时候以及如何去在 JSX 中调用 console.log 方法了!
作者:Llorenç Muntaner
原文:https://medium.com/javascript...
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!