Question

我正在尝试从其他组件渲染组件，但是失败了，有人可以帮我解决代码并帮助我理解我做错了什么吗？另外，使用以下示例，有人可以帮助我了解何时使用type = text / jsx或type = text / babel？

<body>
<div class="container">
  <h1>Flask React</h1>
  <br>
  <div id="content"></div>
</div>
<!-- scripts -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<script type="text/jsx">

  /*** @jsx React.DOM */

  var realPython = React.createClass({
    render: function() {
      return (<realPython1 />);
    }
  });

  var realPython1 = React.createClass({
    render: function() {
      return (<h2>Greetings, from Real Python!</h2>);
    }
  });


  ReactDOM.render(
    React.createElement(realPython, null),
    document.getElementById('content')
  );

</script>
</body>

Answer 1

嘿，我对你的代码进行了一些重构，也许看看反应文档，他们在这里非常棒，你的代码

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- scripts -->
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
        <div id="content"></div>
        <script type="text/babel">

              var RealPython = React.createClass({
                render: function() {
                  return <RealPython1 />
                }
              });

              var RealPython1 = React.createClass({
                render: function() {
                  return <h2>Greetings, from Real Python!</h2>;
                }
              });


              ReactDOM.render(
                React.createElement(RealPython),
                document.getElementById('content')
              );

            </script>
</body>

Answer 2

首先，您可能不想再使用jstransform，但已被弃用：https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

相反，你应该使用像babel这样的转换器：https://babeljs.io/

一旦你编译了代码，那么你只需编写javascript就可以使用脚本类型＆＃34; text / javascript＆＃34;而不是＆＃34; text / jsx＆＃34;或＆＃34; text / babel＆＃34;。

以下是如何在组件中呈现组件的示例。

＆＃13;

class SubComponent extends React.Component {
  render() {
    return <div>
      <h2>A cool sub-component</h2>
    </div>;
  }
}

class Application extends React.Component {
  render() {
    return <div>
      <h2>Greetings, from Real Python!</h2>
      <SubComponent />
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></app>

＆＃13;

无法从其他组件中呈现组件

2 个答案: