Question

所以我在互联网上阅读

vanilla JavaScript规则是，return语句只能返回一个东西。一件事可以是数组，对象或React的＆gt; JSX案例，它包含多个DOM元素。

哪个有道理，但后来在同一个地方提到了

return [ ...不能包含 CSS类，样式，HTML属性，......但是，

    return <div classname="myClass" style={‌{color:"red"}} onClick={ ... }><p>A</p><p>B ...

可以包含 CSS类，样式，HTML属性。

这句话让我很难理解。

“return [ ...不能包含CSS类，样式，HTML属性，......”

[问题]：有人可以用示例解释上述陈述吗？

此外，这是我们在教程

中使用的有效语句

return [

 <p  onClick={this.props.click}> Hey, I am {this.props.name}{this.props.children} and my age is {this.props.age} </p>,
<input type="text" onChange={this.props.changed} value={this.props.name} />
  ]

我猜我们上面没有使用过任何html属性？但是如果我们传递 CSS类，或者HTML属性如 src 或 href ，它将不起作用？

Answer 1

在JSX中，return <someHtmlElement attribute='...'>只是React.createElement('someHtmlElement...调用的一种奇特语法，所以基本上，你仍然会返回一个对象。或者，如果是您的示例return [ <p onClick...：一个对象数组。

另外请记住， CSS类，样式和HTML属性仅在HTML元素的上下文中有意义（简单地说，放在<和>之间），因为这些都将成为上述React.createElement电话的一部分。所以这就是为什么你不能直接将它们返回到数组中（即return [ classname="myClass", style={‌{color:"red"}} ]）：它们在＆＃34; plain＆＃34;中没有意义。的JavaScript。

但是，您可以返回一个HTML元素数组（在本例中基本上是JavaScript的对象），而那些HTML元素当然可以包含 CSS类，样式和HTML属性

我希望这可以解决它。如果有疑问，请记住JSX最终只是最终成为JavaScript，并试着考虑什么＆＃34; vanilla＆＃34; JavaScript允许你这样做。

Answer 2

你看到的是'jsx'，这是一种新的语法，它是在引入反应时产生的。 jsx看起来像html，但转换为正常的javascript函数调用。您不能使用包含jsx的文件并将其提供给浏览器。您将需要一些将文件中的jsx代码转换为javascript函数调用的转换器。巴贝尔是他们最着名的转换器。

例如

<div className='main' style={{backgroundColor: 'red'}}>abc</div>

转换为

React.createElement(
  'div',
  { className: 'main', style: { backgroundColor: 'red' } },
  'abc'
);

因此，在您的原始问题中，您返回的不是css属性或html，而是函数调用React.createElement（）返回的内容。 React.createElement返回什么？它返回一个普通的javascript对象。该对象描述了必须呈现的html。从你的问题来看，你实际上是在返回一个对象。

因此，在最后一个示例中，您将返回一个对象数组。

return [

 <p  onClick={this.props.click}> Hey, I am {this.props.name}{this.props.children} and my age is {this.props.age} </p>,
<input type="text" onChange={this.props.changed} value={this.props.name} />
  ]

P.S。您可以查看您的jsx将转换为哪些javascript代码 - https://babeljs.io/repl/

Answer 3

普通的javascript语法和React语法之间存在很大差异。 React使用一种名为JSX的语法，感谢编译器作为Babel，它是javascript中的tanspiled JSX代码。

为了让您更好地了解Babel对JSX所做的事情：

 return [ <p />, <p className="hello" /> ];

它变成了：

 return [React.createElement("p", null), React.createElement("p", { className: "hello" })];

您可以访问https://babeljs.io/repl/并查看转换的工作原理。

反应：退货声明

3 个答案: