Question

由于我不知道原因，HTML似乎没有加载snippetInfo.js。我已经在网上冲浪了很多，但是解决方案不起作用。如果在脚本标签中添加type='text/javascript'，则会收到错误Uncaught SyntaxError: Unexpected token '<'，我认为这与我的React配置有关，或者package.json文件中缺少某些内容。请让我知道。

index.html：

<html>
  <head>
    <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>
  </head>
<body>
  <h1>Snippet #1234</h1>
  <div id="snippetinfo"></div>
  <script src="snippetInfo.js" ></script>
</body>
</html>

snippetInfo.js：

class UpdateButton extends React.Component {
  render() {
    return (
      <button className='Update'>Update Info</button>
    );
  }
}

class SnippetInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Snippet Info Here...',
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

   
  handleSubmit(event) {
    alert('Snippet Info was updated');
    event.preventDefault();
  }
  

  render () {
    const status = 'Next player: Joe';
    
    return (
      <div>
        <div className='status'>{status}</div>
        <div className='form'>
          <form onSubmit={this.handleSubmit}>
            <label>
              Snippet Info:
              <textarea value={this.state.value} onChange={this.handleChange}/>
            </label>
            <input type='submit' value='Submit' />
          </form>
        </div>
      </div>
    );
  }
}

 ReactDOM.render(
  <SnippetInfo />,
  document.getElementById("snippetinfo")
);

package.json

{
  "name": "Urania",
  "version": "1.0.0",
  "description": "<html> <head> <style> /************************************* GENERAL *************************************/ body {     margin: 15;     padding: 0;     font: 12px/1.4em \"Lucida Grande\", Verdana, sans-serif;     color: #333;     overflow-y: scroll;     text-rendering: optimizeLegibility;     background-color: #F2F2F2; }",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jhyuen/urania.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jhyuen/urania/issues"
  },
  "homepage": "https://github.com/jhyuen/urania#readme",
  "devDependencies":{
      "babel-cli": "^6.26.0",
      "babel-preset-react-app": "^3.1.2",
      "babel-core": "^6.1.*",
      "babel-loader": "^6.2.*",
      "babel-preset-es2015": "^6.16.*",
      "babel-preset-react": "^6.16.*",
      "webpack": "^1.13.*",
      "webpack-dev-server": "^1.16.*"
  },
  "dependencies":{
      "react": "^16.11.0",
      "react-dom": "^16.11.0"
  }
}

Answer 1

我在脚本标签中添加了"type='text/babel'"，并且可以正常工作。

React组件未渲染为HTML

1 个答案: