片段未在本地主机中呈现(First react应用程序)

我这里有一个简单的react应用程序，但由于某种原因，它没有呈现类COIN 的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Ticker</th>
<th>Price</th>
</tr>
</thead>
<tbody id='root'></tbody>
</table>
<script type="text/babel">

class Coin extends React.Component{
/*constructor(props){
super(props);
}*/
render(){
return (
<tr>
<td>{this.props.name}</td>
<td>{this.proper.ticker}</td>
<td>{this.proper.price}</td>
</tr>
);
}
}

ReactDOM.render(
<React.Fragment> 
<Coin name='Bitcoin' ticker='BTC' price='$9999'/>
<Coin name='Ethereum' ticker='ETH' price='$299'/>
<Coin name='Ampleforth' ticker='AMPL' price='$3.99'/>
</React.Fragment>,
document.getElementById('root')
);      

</script>

</body>
</html>

当我转到localhost/reactivan/myfirstreact.html时，我看到的只是表格标题

Name    Ticker  Price

我是新手，我使用VirtualStudio作为编辑器，所以我真的不知道我需要修复什么才能正确地呈现内容。

当我打开控制台时，我看到了那些错误：

Uncaught TypeError: Cannot read property 'ticker' of undefined
at Coin.render (<anonymous>:45:179)
at finishClassComponent (react-dom.development.js:17295)
at updateClassComponent (react-dom.development.js:17245)
at beginWork (react-dom.development.js:18755)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
at invokeGuardedCallback (react-dom.development.js:286)
at beginWork$1 (react-dom.development.js:23338)
at performUnitOfWork (react-dom.development.js:22292)
at workLoopSync (react-dom.development.js:22265)
3react-dom.development.js:19662 The above error occurred in the <Coin> component:
in Coin
Consider adding an error boundary to your tree to customize error handling behavior.
logCapturedError @ react-dom.development.js:19662
react-dom.development.js:22800 Uncaught TypeError: Cannot read property 'ticker' of undefined
at Coin.render (<anonymous>:45:179)
at finishClassComponent (react-dom.development.js:17295)
at updateClassComponent (react-dom.development.js:17245)
at beginWork (react-dom.development.js:18755)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
at invokeGuardedCallback (react-dom.development.js:286)
at beginWork$1 (react-dom.development.js:23338)
at performUnitOfWork (react-dom.development.js:22292)
at workLoopSync (react-dom.development.js:22265)

我也得到了这个错误：

You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/

我不确定这是因为我没有正确设置Virtual Studio，还是我的代码有错误。我不认为我的代码是错误的，因为我遵循了一个教程，并从那里复制了它，所以我认为这是我的虚拟工作室设置中的一个错误：在之前，我从未使用过Virtual Studio或react

调试步骤一：读取错误！

Cannot read property 'ticker' of undefined

因此，请搜索ticker的代码。

然后您会看到this.proper.ticker。

看起来像是打字错误。

换成this.props.ticker就好了。

将property更改为=>支柱

<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Ticker</th>
<th>Price</th>
</tr>
</thead>
<tbody id='root'></tbody>
</table>
<script type="text/babel">

class Coin extends React.Component{
/*constructor(props){
super(props);
}*/
render(){
return (
<tr>
<td>{this.props.name}</td>
<td>{this.props.ticker}</td>
<td>{this.props.price}</td>
</tr>
);
}
}

ReactDOM.render(
<React.Fragment>
<Coin name='Bitcoin' ticker='BTC' price='$9999'/>
<Coin name='Ethereum' ticker='ETH' price='$299'/>
<Coin name='Ampleforth' ticker='AMPL' price='$3.99'/>
</React.Fragment>,
document.getElementById('root')
);

</script>

</body>
</html>

相关内容

最新更新

热门标签：