Как заставить этот код работать без JSX? - PullRequest
Новая
       27

Как заставить этот код работать без JSX?

0 голосов
/ 09 июля 2020

Итак, у меня есть следующий код 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>

Я попытался заставить указанный выше код работать без JSX с помощью React.createElement (), как показано ниже: 

<!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>

Я получаю следующую ошибку (щелкните ссылку, чтобы просмотреть снимок экрана): Снимок экрана

Вот еще один пример моей попытки использования codepen.io: https://codepen.io/eugenetedkim/pen/eYJrWaZ?editors=1010

Я получаю эту ошибку: Uncaught ReferenceError: ReactDOM не определен

Я пробовал использовать онлайн транскомпилятор Babel , и мне тоже не удалось заставить его работать .

Пожалуйста, оставьте свой отзыв.

Большое спасибо!

1 Ответ

0 голосов
/ 09 июля 2020
• 1000 *
...