时间戳

首页 > 解决方案 > 带有 jsx 的脚本和不带 jsx 的脚本不能在同一页面上工作

reactjs - 带有 jsx 的脚本和不带 jsx 的脚本不能在同一页面上工作

问题描述

我有一个页面，我想在其中测试一些反应代码。如果它们单独在页面中，则两个脚本都是独立工作的。如果我同时添加两者，带有 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

解决方案

    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。这将起作用。确保命名您的组件。

推荐阅读