如何在没有 JSX 的情况下使这段代码工作？

Question

所以我有以下正确呈现的 JSX 代码：

<!DOCTYPE html>
<html>
<head>
    <title>First React App</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id='app'></div>

    <script type='text/babel'>
        function Avatar(props) {
          return <img src={props.src} />
        }

        function Label(props) {
          return <h1>Name: {props.name}</h1>
        }

        function ScreenName(props) {
          return <h3>username: {props.username}</h3>
        }

        function Badge(props) {
          const user = props.user
          
          return (
            <div>
              <Avatar src={user.img} />
              <Label name={user.name} />
              <ScreenName username={user.username} />
            </div>
          )
        }

        ReactDOM.render(
          <Badge user={{
            name: 'Tyler McGinnis',
            img: 'https://avatars0.githubusercontent.com/u/2933430?v=3&s=460',
            username: 'tylermcginnis'
          }} />,
          document.getElementById('app')
        )
    </script>
</body>
</html>

我尝试使用 React.createElement() 使上述代码在没有 JSX 的情况下工作，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>First React App</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id='app'></div>

    <script type='text/babel'>
    
        function Avatar(props) {
          return React.createElement(
            'img',
            {src: props.src}
          );
        }

        function Label(props) {
          return React.createElement(
            "h1",
            null,
            "Name: ",
            props.name
          );
        }

        function ScreenName(props) {
          return React.createElement(
            "h3",
            null,
            "username: ",
            props.username
          );
        }

        function Badge(props) {
          const user = props.user;
          
          return React.createElement(
            "div",
            null,
            React.createElement(
              Avatar,
              {src: user.img}
            ),
            React.createElement(
              Label,
              {name: user.name}
            ),
            React.createElement(
              ScreenName,
              {username: user.username}
            )
          );
        }

        ReactDOM.render(
          React.createElement(
            Badge,
            {
              User:
              {
                name: 'Tyler McGinnis',
                img: 'https://avatars0.githubusercontent.com/u/2933430?v=3&s=460',
                username: 'tylermcginnis'
              }
            }
          ),
          document.getElementById('app')
        )
    </script>
</body>
</html>

我收到以下错误（请单击 link 查看屏幕截图）： Screenshot

这是我尝试使用 codepen.io 的另一个例子：https://codepen.io/eugenetedkim/pen/eYJrWaZ?editors=1010

我收到这个错误：未捕获的 ReferenceError：未定义 ReactDOM

我尝试使用在线 Babel transcompiler，但我也无法使用它。

请提供任何反馈。

非常感谢！

Answer 1

您正在传递道具 User 并尝试以用户身份使用，所以问题是错字，在代码笔中您得到 ReactDom not defined 因为您不包括 react 和 react-dom 作为其中的依赖项。

如何在没有 JSX 的情况下使这段代码工作？

How do I make this code work without JSX?

jsx

reactjs

babeljs