Question

我的Javascript和React级别是初学者。

我很开心与https://babeljs.io/repl一起玩，以了解如何将我的JSX转换为旧版Javascript，并且有些事情我不太了解。

我正在尝试使用箭头功能和该功能的一个实例：

<DataGridTemplateColumn Header="Last Activity">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding LastActivity}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <DatePicker SelectedDate="{Binding LastActivity}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>

哪个让我出错：

const App = () => {
    return <div></div>;
}

<App></App>

请注意，普通函数及其实例（）正常运行。箭头功能也只能正常工作。当我使用箭头功能及其JSX实例化时，就会发生问题。

谢谢!!

Answer 1

还请注意，在文件级别范围内使用<App></App>（虽然在技术上是正确的）会导致丢弃它产生的值-不会挂载任何组件。通常，人们会使用ReactDOM的render方法来渲染React组件的树：

const root = document.getElementById("root");
ReactDOM.render(<App />, root)

Answer 2

当我使用箭头功能及其JSX实例化时，就会发生问题。

这就是这里的问题。为了正确解析，<App></App>应该明确标识为JSX。之所以无法这样做，是因为省略了箭头后的分号。

should be：

const App = () => {
    return <div></div>;
};

<App></App>

另一个答案提到，JSX语法通常用于ReactDOM.render(...)之类的情况中，可以明确地将其标识为表达式，因此在这种情况下不会发生此问题。

Babel不会转换箭头功能的JSX实例

2 个答案: