Jadi saya memiliki kode JSX berikut yang dirender dengan benar:

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

Saya mencoba membuat kode di atas berfungsi tanpa JSX menggunakan React.createElement() seperti yang ditunjukkan di bawah ini:

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

Saya mendapatkan kesalahan berikut (silakan klik tautan untuk melihat tangkapan layar): Screenshot

Berikut adalah contoh lain dari upaya saya menggunakan codepen.io: https://codepen.io/ eugenetedkim/pen/eYJrWaZ?editors=1010

Saya mendapatkan kesalahan ini: Uncaught ReferenceError: ReactDOM is not defined

Saya mencoba menggunakan online sayang l transcompiler dan saya juga tidak bisa membuatnya bekerja.

Harap berikan umpan balik apa pun.

Terima kasih banyak!

0
Eugene 9 Juli 2020, 11:00

1 menjawab

Jawaban Terbaik

Anda melewati Pengguna prop dan mencoba menggunakan sebagai pengguna sehingga masalahnya adalah kesalahan ketik, di codepen Anda mendapatkan ReactDom tidak ditentukan karena Anda tidak menyertakan react dan react-dom sebagai dependensi di dalamnya.

0
tantei 9 Juli 2020, 08:33