Javascript React.JS未从render返回任何内容_Javascript_Reactjs

Javascript React.JS未从render返回任何内容

javascript reactjs

Javascript React.JS未从render返回任何内容,javascript,reactjs,Javascript,Reactjs,我是一个新的反应者，我想做我的第一步，但却陷入了一个可能非常基本的错误。我确实读过关于这个主题的其他文章，但我无法从中找到解决问题的方法。请帮忙！谢谢大家! 错误消息 Uncaught Error: MyTable(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. index.html &l

我是一个新的反应者，我想做我的第一步，但却陷入了一个可能非常基本的错误。我确实读过关于这个主题的其他文章，但我无法从中找到解决问题的方法。请帮忙！谢谢大家!

错误消息

Uncaught Error: MyTable(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

index.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>

编辑：

删除return
和React.createElement之间的新行。
return
后面的新行将返回undefined
，并忽略后续代码，如下所示
请在此处查看发生的原因（自动插入分号）：
return语句受自动分号插入（ASI）的影响。return关键字和表达式之间不允许使用行结束符。

改变
到
返回(
{`${this.props.first}`}
{`${this.props.second}`}
)

我不知道您为什么要使用createElement
来显示表格…
下面是正确的代码
正如@Alastair提到的，您不应该将return语句移动到新行
您必须用“`”括起模板文本
样式属性语法错误，必须像对象一样使用它

类MyTable扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回React.createElement（“表”，null，
React.createElement（“tr”，null，
React.createElement（“td”，null，`${this.props.first}`），
React.createElement（“td”{
风格：{
text对齐：“右”
}
}，`${this.props.second}`）
)
);
}
}
ReactDOM.render(
React.createElement（MyTable{
第一：“厄尔斯特”，
第二：“茨威特”
}，空），
document.getElementById（'content'）
);
问题是您实际上没有返回任何内容。这是返回语句的正确语法：
render（）{
返回(
React.createElement（“表”，null，
React.createElement（“tr”，null，
React.createElement（“td”，null，`${this.props.first}`），
React.createElement（“td”，{style:{textAlign:{right”}}，`${this.props.second}`）
)
)
)  
}

还请注意，您可以将模板文本与“
一起使用，但需要使用反勾号：``
您还将样式用作字符串。在React中，样式是对象style:{width:“100%”}
“我对React还不熟悉，想做我的第一步“--请使用而不是像那样奇怪的非JSX设置。我从未见过有人编写这样的react应用程序。我想将react集成到用php编写的现有网站中，完全改变堆栈和工具链是不可能的。我不是从零开始开发的！顺便说一下，JSX版本也会带来同样的错误！在return
之后不能有新行-这就是返回的undefined
可能是加载了错误的脚本吗？示例说已经加载了myTableWITHjsx，但您正在向我们展示myTableNOjsx.js代码。我认为通过消除JSX，我还可以消除错误源！我还将尝试JSX版本！错误是返回后的新行-JSX没有difference@Sowam：非常感谢，JSX版本也可以！现在我有一个关于样式映射的错误，但那是另一个主题@阿拉斯费尔：非常感谢！这是主要的错误！
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')
);

 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>
)