我正在修改一个已经存在的Web应用程序，并且我开始在if with react页面上进行更改。
使用createElement时，可以成功显示按钮之类的基本元素，并且单击按钮时也可以得到反馈。
只是为了进行试验，我在html内添加了另一个，并将其称为“ main”。 简单的html看起来像这样：
<script src="app/like_button.js" type="text/javascript"></script>
<script src="app/modal.js" type="text/babel"></script>
<div id="buttons"></div>
<div id="main"></div>
接下来，我在app文件夹内创建modal.js：
// modal trial
class ExampleApp extends React.Component {
constructor () {
super();
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal () {
this.setState({ showModal: true });
}
handleCloseModal () {
this.setState({ showModal: false });
}
render () {
return (
<div>
<button onClick={this.handleOpenModal}>Trigger Modal</button>
<ReactModal
isOpen={this.state.showModal}
contentLabel="Minimal Modal Example"
>
<button onClick={this.handleCloseModal}>Close Modal</button>
</ReactModal>
</div>
);
}
}
const props = {};
ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))
运行我的应用程序时，没有出现任何错误，但react组件未显示。
我认为这可能与通天塔有关。我使用以下信息安装了它：https://babeljs.io/en/setup#installation
我还有一个package.json，如下所示：
{
"name": "--",
"version": "1.0.0",
"description": "Prod instance is at https:--",
"main": "/public/app/main.js",
"directories": {
"doc": "doc"
},
"dependencies": {
"axios": "^0.18.0"
},
"devDependencies": {
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3",
"babel-preset-react-app": "^7.0.1"
},
"babel" : {
"presets": ["es2015", "react" ]
,}
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http:--"
},
"keywords": [],
"author": "",
"license": "ISC"
}
出于隐私目的，我删除了一些信息。
希望您能帮助我解决这个问题。
更新 如建议的那样，我尝试安装babel，但似乎有网络相关的问题。当我运行时：npm install @ babel / preset-env --save-dev 我收到此日志：
0 info it worked if it ends with ok
1 verbose cli [ '/global/appl/node.js/node-v8.12.0-linux-x64/bin/node',
1 verbose cli '/global/appl/node.js/prod/bin/npm',
1 verbose cli 'install',
1 verbose cli '-g',
1 verbose cli 'babel-preset-react-app',
1 verbose cli '--save-dev' ]
2 info using npm@6.4.1
3 info using node@v8.12.0
4 verbose npm-session 75f9a86bb46d1391
5 silly install loadCurrentTree
6 silly install readGlobalPackageData
7 silly fetchPackageMetaData error for babel-preset-react-app@latest request to https://registry.npmjs.org/babel-preset-react-app failed, reason: getaddrinfo EAI_AGAIN acruz:80
8 timing stage:rollbackFailedOptional Completed in 3ms
9 timing stage:runTopLevelLifecycles Completed in 4862ms
10 verbose type system
11 verbose stack FetchError: request to https://registry.npmjs.org/babel-preset-react-app failed, reason: getaddrinfo EAI_AGAIN acruz:80
11 verbose stack at ClientRequest.req.on.err (/global/appl/node.js/node-v8.12.0-linux-x64/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14)
11 verbose stack at emitOne (events.js:116:13)
11 verbose stack at ClientRequest.emit (events.js:211:7)
11 verbose stack at onerror (/global/appl/node.js/node-v8.12.0-linux-x64/lib/node_modules/npm/node_modules/agent-base/index.js:100:9)
11 verbose stack at callbackError (/global/appl/node.js/node-v8.12.0-linux-x64/lib/node_modules/npm/node_modules/agent-base/index.js:122:5)
11 verbose stack at <anonymous>
11 verbose stack at process._tickCallback (internal/process/next_tick.js:189:7)
12 verbose cwd /home/user/project_name
13 verbose Linux 4.4.103-92.53-default
14 verbose argv "/global/appl/node.js/node-v8.12.0-linux-x64/bin/node" "/global/appl/node.js/prod/bin/npm" "install" "-g" "babel-preset-react-app" "--save-dev"
15 verbose node v8.12.0
16 verbose npm v6.4.1
17 error code EAI_AGAIN
18 error errno EAI_AGAIN
19 error request to https://registry.npmjs.org/babel-preset-react-app failed, reason: getaddrinfo EAI_AGAIN acruz:80
20 verbose exit [ 1, true ]
我实际上不知道发生了什么。我记得读到它可能是与网络有关的问题，因为我正在使用代理，如此处的一些评论所述：https://github.com/npm/npm/issues/16661