React.JS 渲染没有返回任何内容
[英]React.JS Nothing was returned from render
问题描述
I am new to React and want to do my first steps but get stuck on a probably very basic error.
我是 React 的新手，想迈出第一步，但遇到了一个可能非常基本的错误。 I did read the other threads to this topic, but I could not derive a solution for my problem out of them.我确实阅读了该主题的其他主题，但我无法从中得出解决我的问题的方法。 Please help!请帮忙！ Thank you!谢谢！
Error Message错误信息
Uncaught Error: MyTable(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
index.html索引.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="content">
</div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/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="myTableNOjsx.js" type="text/babel"></script>
</body>
</html>
myTableNOjsx.js myTableNOjsx.js
class MyTable extends React.Component {
constructor(props) {
super(props);
}
render(){
return
React.createElement("table", null,
React.createElement("tr", null,
React.createElement("td", null, "${this.props.first}"),
React.createElement("td", {style: "text-align: right"}, "${this.props.second}")
)
)
;
}
}
ReactDOM.render(
React.createElement(MyTable, {first: "erste", second: "zweite"}, null),
document.getElementById('content')
);
EDIT: <script src="myTableWITHjsx.js" to <script src="myTableWITHjsx.js"编辑： <script src="myTableWITHjsx.js"到<script src="myTableWITHjsx.js"
4 个解决方案
解决方案1
1 已采纳 2021-04-26 12:39:31
Remove the new line between return and React.createElement .删除return和React.createElement之间的新行。 A new line after return will return undefined and ignore the subsequent code, as is happening here. return后的新行将返回undefined并忽略后续代码，就像这里发生的那样。
See why it is happening (Automatic Semicolon Insertion) here:在这里查看它发生的原因（自动分号插入）：
The return statement is affected by automatic semicolon insertion (ASI).
解决方案2
0 2021-04-26 12:40:59
Change改变
return
React.createElement("table", null,
React.createElement("tr", null,
React.createElement("td", null, "${this.props.first}"),
React.createElement("td", {style: "text-align: right"}, "${this.props.second}")
)
)
to至
return (
<table>
<tr>
<td>{`${this.props.first}`}</td>
<td>{`${this.props.second}`}</td>
</tr>
</table>
)
I don't know why you are using createElement for just displaying table...我不知道你为什么使用createElement来显示表格......
解决方案3
0 2021-04-26 12:45:54
Here is the corrected code working fine.这是正确的代码工作正常。
- As @Alastair mentioned you shouldn't move return statement to new line.正如@Alastair 提到的，您不应将 return 语句移至新行。
- You have to enclose template literals with ``.您必须用 `` 括起模板文字。
- style attribute syntax is wrong, you've to use it like object. style 属性语法错误，你必须像 object 一样使用它。
class MyTable extends React.Component { constructor(props) { super(props); } render() { return React.createElement("table", null, React.createElement("tr", null, React.createElement("td", null, `${this.props.first}`), React.createElement("td", { style: { textAlign: "right" } }, `${this.props.second}`) ) ); } } ReactDOM.render( React.createElement(MyTable, { first: "erste", second: "zweite" }, null), document.getElementById('content') );
<.DOCTYPE html> <html> <head> </head> <body> <div id="content"> </div> <:-- Load React, --> <.-- Note. when deploying. replace "development.js" with "production:min.js". --> <script src="https.//unpkg:com/react@17/umd/react.development.js" crossorigin></script> <script src="https.//unpkg:com/react-dom@17/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="myTableNOjsx.js" type="text/babel"></script> </body> </html>
解决方案4
0 2021-04-26 12:49:09
The problem is you were actually returning nothing.问题是你实际上什么也没返回。 This is the correct syntax for your return statement:这是您的 return 语句的正确语法：
render(){
return(
React.createElement("table", null,
React.createElement("tr", null,
React.createElement("td", null, `${this.props.first}`),
React.createElement("td", {style: {textAlign: "right"}}, `${this.props.second}`)
)
)
)
}
Also notice that you where using template literals with " but you need to use backticks: ``另请注意，您在哪里使用带有"的模板文字，但您需要使用反引号： ``
You also are using styles as strings.您还使用 styles 作为字符串。 In React, styles are objects style: { width: "100%" }在 React 中，styles 是对象style: { width: "100%" }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.