Question

我正在尝试从html页面呈现react组件。我引用了问题React - component in seperate script does not work，并从类似http://localhost/index.html的URL加载了html文件。我的index.html：

<!DOCTYPE html>
   <html>
       <head>
           <script src="https://...fb.me/react-0.13.3.js"></script>
           <script src="https://...fb.me/JSXTransformer-0.13.3.js"></script>
       </head>
       <body>
           <div id="example"></div>
           <script type="text/jsx" src="index.js"></script>
       </body>
   </html>

我的index.js：

 ReactDOM.render(<MainPage />, document.getElementById('example'))

错误是未定义MainPage。但是当我写

include MainPage

include语句有错误。另外，如何从react-tabs中包含其他React库，例如“ Tabs”？

Answer 1

如果index.js中加载的html包含<MainPage />，则意味着您没有编译代码。浏览器本身不支持text/jsx。

要与JSX配合使用，您将需要使用webpack之类的编译器/捆绑程序。

Answer 2

由于您是第一次学习React.J，请考虑@Kapil's answer：

<!DOCTYPE html>
<html>
  <head>
   <script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
</script>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

如何在单独的React组件脚本中使用React库？

2 个答案: