Question

说到 React，我完全是个新手。我选择在文件中包含 React 和 ReactDOM CDN。

我在渲染此组件时遇到问题。

<script type="text/babel">

        function Header(){

        return(
            <div>
            <p>Blog</p>
            </div>
            );

        }

    ReactDOM.render(<Header />);
</script>

Answer 1

您没有使用脚本标签在 DOM 内部渲染 react。

ReactDOM.render 使用 2 个参数，主要组件（App）和位置（主要是主体内的 div 标签，ID 为“root”。

所以渲染你的第一个 React App.js 的正确方法是：

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

每个 React 组件必须以大写字母开头。

要渲染这个 App.js 组件，您将使用 ReactDOM.render() 创建一个 index.js 组件，例如：

import ReactDOM from 'react-dom';
import App from './App.js'

ReactDOM.render(<App />, document.querySelector('#root'))

HTML 将是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='root'></div>
</body>
</html>

不要在 DOM 或任何 HTML 标签中添加任何 JS。你正在用 React JSX 做所有事情。

因此，如果您想要一个标题，您将创建一个标题组件并将其包装在 App.js 组件中。

我真的建议您了解有关 React 的更多信息，因为如果您不确定自己在做什么，那将会一团糟，并且您的应用程序的性能会非常低。

查看 React 文档 here。

我在将组件渲染到 DOM 时遇到问题

1 个答案: