0

我只是好奇为什么我们在渲染时必须将组件名称包含在标签中。我们也可以没有它。

例如

function TemporaryName() {
    return (
        <div>
            <h1>Stack Overflow Question</h1>
            <h1>Stack Overflow Question</h1>
        </div>
    )
}

ReactDOM.render(<TemporaryName />, document.getElementById("root"))

这是封闭的，线

ReactDOM.render(TemporaryName(), document.getElementById("root"))

也给出了相同的结果。我知道它必须有一些意义，我想知道为什么？请帮忙

4

2 回答 2

4

您的第二个示例是将 TemporaryName 作为函数调用，然后将输出传递给渲染。基本上，就好像您写道：

ReactDOM.render((
  <div>
    <h1>Stack Overflow Question</h1>
    <h1>Stack Overflow Question</h1>
  </div>
), document.getElementById('root'))

可以通过<div>into ReactDOM.render，所以你没有看到问题，但是你会遇到更复杂的组件的问题。一旦你尝试使用任何钩子TemporaryName，你就会得到一个错误。您将尝试在调用之前调用钩子ReactDOM.render，这不起作用。

选项 1 将与钩子一起使用。这样，您可以使用 JSX 标签创建一个反应元素，并将该元素传递到ReactDOM.render. 此时这不会调用您的函数，因此不会滥用钩子。稍后，react 将调用您的组件，并且钩子将起作用，因为我们将处于 react 渲染周期的中间。

第二种方法将失败的示例：

function TemporaryName() {
  const [name, setName] = useState('Stack Overflow');
  return (
    <div>
      <h1>{name} Question</h1>
      <h1>{name} Question</h1>
    </div>
  )
}
于 2021-11-12T16:01:38.297 回答
0

可能是因为当你声明你的组件时，你是在声明一个函数：function TemporaryName()

于 2021-11-12T16:00:01.210 回答