Question

我正在创建一个保留得分的React App，但到目前为止，我的组件没有显示在浏览器中，有人可以帮忙吗？到目前为止，记分牌应该有一个计分器和球员姓名，但到目前为止没有任何反应，我是新手。

我尝试在HTML中链接babel，这是React代码

const Header = () =>
        <header>
            <h1>ScoreBoard</h1>
                <span className="stats">Player: 1 </span>
        </header>;

const Player = () => {
    return(
        <div className="player">
            <span classNae="player-name">
                Guil
            </span>
            <Counter />
        </div>
    );
}

const counter = () => {
    return(
            <div className="counter">
                <button className="counter-decriiment">-</button>
                <span className="counter-score"></span>
                <button className="counter-incriment">+</button>
                </div>
    );
}

const App = () =>{
    return(
        <div className="scoreboard">
            <Header/>
            {/* { Players List } */}
            <PLayer />
        </div>
    );
}
ReactDom.render(
    <App />,
    document.getElementById('root')
);
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="./app.css" />
  </head>

  <body>

    <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>
    <script type="text/babel" src="./app.js"></script>  </body>
</html>

Answer 1

您缺少一个元素，该元素必须具有 root id 才能呈现。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="./app.css" />
  </head>

  <body>
  <div id="root"></div>

    <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>
    <script type="text/babel" src="./app.js"></script>  </body>
</html>

Answer 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="./app.css" />
  </head>

  <body>
    <div id="root"></div>

    <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>
    <script type="text/babel" src="app.js"></script>
  </body>
</html>

const Header = () => {
    return(
      <header>
          <h1>ScoreBoard</h1>
              <span className="stats">Player: 1 </span>
      </header>
    );
  }

  const Player = () => {
      return( <div className="player">
                 <span className="player-name"> Guil </span><Counter />
               </div> 
            );
    }


  const Counter = () => { 
      return( <div className="counter">
             <button className="counter-decrement">-</button>
             <span className="counter-score"></span>
             <button className="counter-increment">+</button>
             </div>
            );
  }

  const App = () =>{ 
      return( 
          <div className="scoreboard">
          <Header/> { } <Player /> </div> ); } 

  ReactDOM.render( <App />, document.getElementById('root') );

我的表格出现在浏览器中时出现问题

2 个答案: