使用jsx和脚本而不使用jsx的脚本无法在同一页面上运行

问题描述 投票:0回答:1

我有一个页面,我想测试一些反应代码。如果它们在页面中是独立的,则两个脚本都是独立工作的。如果我添加两者,使用jsx的脚本不起作用。这种行为有解释吗?不允许吗?

代码没什么。我猜测进口不能一起生活。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>My Website</title>

</head>

<body>
    <div id="myroot"></div>
    <div id="myBabel"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- Load our React component. -->

    <script src="js/index2.js"></script>
    <script type="text/babel" src="js/index.jsx"></script>
</body>

</html>

这里的index2.js内容:

class App extends React.Component {
  render() {
    return React.createElement("div", null, React.createElement("h1", null, " the list  "));
  }

}
ReactDOM.render(React.createElement(App,null,null),
    document.getElementById("myroot"));

这里是一个与jsx的反应:


class App extends React.Component {
  state = {
    /* Initial State */
    input: "",
    reversedText: ""
  };
  /* handleChange() function to set a new state for input */
  handleChange = event => {
    const value = event.target.value;
    this.setState({
      input: value
    });
  };
  /* handleReverse() function to reverse the input and set that as new state for reversedText*/
  handleReverse = event => {
    event.preventDefault();
    const text = this.state.input;
    this.setState({
      reversedText: text
        .split("")
        .reverse()
        .join("")
    });
  };
  render() {
    return (
      <React.Fragment>
        { /* handleReverse() is called when the form is submitted */}
        <form onSubmit={this.handleReverse}>
          <div>
            { /* Render input entered */}
            <label>Text: {this.state.input}</label>
          </div>
          <div>
            { /* handleChange() is triggered when text is entered */ }
            <input
              type="text"
              value={this.state.input}
              onChange={this.handleChange}
              placeholder="Enter a text"
            />
          </div>
          <div>
            <button>Reverse Text</button>
          </div>
        </form>
        { /* Render reversed text */}
        <p>Reversed Text: {this.state.reversedText}</p>
      </React.Fragment>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("myBabel"));

就像我说的那样,导入是单独工作的,但HTML页面中的导入都没有。

reactjs
1个回答
0
投票
    class List extends React.Component {
     render() {
               return React.createElement("div", null, React.createElement("h1", null, " the list  "));
  }

}
ReactDOM.render(React.createElement(List,null,null),
    document.getElementById("myroot"));

如果您检查控制台日志中的代码,您会发现此错误 - Uncaught SyntaxError: Identifier 'App' has already been declared

您将两个组件都标识为App。所以React需要不同的标识符来跟踪每个组件。我将其中一个类名从App改为List。这会奏效。确保为组件命名。

© www.soinside.com 2019 - 2024. All rights reserved.