[英]React.JS Nothing was returned from render
我是 React 的新手，想邁出第一步，但遇到了一個可能非常基本的錯誤。 我確實閱讀了該主題的其他主題，但我無法從中得出解決我的問題的方法。 請幫忙！ 謝謝！
錯誤信息
Uncaught Error: MyTable(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
索引.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
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')
);
編輯： <script src="myTableWITHjsx.js"到<script src="myTableWITHjsx.js"
刪除return和React.createElement之間的新行。 return后的新行將返回undefined並忽略后續代碼，就像這里發生的那樣。
在這里查看它發生的原因（自動分號插入）：
return 語句受自動分號插入 (ASI) 的影響。 return 關鍵字和表達式之間不允許有行終止符。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return#automatic_semicolon_insertion
改變
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}")
)
)
至
return (
<table>
<tr>
<td>{`${this.props.first}`}</td>
<td>{`${this.props.second}`}</td>
</tr>
</table>
)
我不知道你為什么使用createElement來顯示表格......
這是正確的代碼工作正常。
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>
問題是你實際上什么也沒返回。 這是您的 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}`)
)
)
)
}
另請注意，您在哪里使用帶有"的模板文字，但您需要使用反引號： ``
您還使用 styles 作為字符串。 在 React 中，styles 是對象style: { width: "100%" }
React.js - 接收錯誤“渲染未返回任何內容”。 來自 switch 語句
[英]React.js - Receiving error “Nothing was returned from render.” from switch statement
將 Function 作為道具傳遞時，React.js -“不是函數”或“渲染未返回任何內容”錯誤
[英]React.js - 'is not a function' Or 'Nothing was returned from render' Error when passing a Function as prop
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.