关于为什么这段代码不起作用的简单解释

Question

作为我的 BA 论文的一部分开始做出反应，需要一些代码作为示例，但不希望它们是通用的，所以如果有人可以解释为什么这行不通，那就是非常有帮助，谢谢！

import React from 'react';
import ReactDOM from 'react-dom/client';

function Greetings(props){
    return <h1> hello!  {props.name}</h1>;
}

const element = <Greetings name ='Sarah' />;
document.getElementById('root').innerHTML = element.props(name);

Answer 1

import React from 'react';
import ReactDOM from 'react-dom/client';

function Greetings(props){
    return <h1> hello!  {props.name}</h1>;
}

const element = <Greetings name ='Sarah' />;
ReactDOM.render(element, document.getElementById('root'));

https://www.pragimtech.com/blog/reactjs/introduction-to-react-elements/ 这可能对你有帮助。

Answer 2

element 是一个小对象，描述了您希望在页面上显示的内容。基本上，它看起来像这样：

const element = {
  type: Greetings,
  props: { name: 'Sarah' }
}

这不是您打算直接使用的东西。没有直接的方法可以确定 Greetings 将包含一个 <h1>，或者它将构造一个字符串 "hello! Sarah"。将这个元素放在页面上的方式是让 react 渲染它。 React 将递归地遍历元素树，根据需要进行渲染，然后比较更改的内容并更新 DOM.

在react 18中，是这样实现的：

import { createRoot } from 'react-dom/client'

const root = createRoot(document.getElementById('root'));
const element = <Greetings name ='Sarah' />;
root.render(element)

root.render 通常在您的应用程序中只调用一次，然后您设置状态以导致重新呈现。

关于为什么这段代码不起作用的简单解释

Simple explanation as to why this code wouldn't work

reactjs