无法在反应中从其他组件渲染组件[重复]答案

【问题标题】：Unable to render a component from other component in react [duplicate]无法在反应中从其他组件渲染组件[重复]
【发布时间】：2017-12-01 19:39:11
【问题描述】：

我正在尝试从其他组件渲染一个组件，但失败得很惨，有人可以帮我编写代码并帮助我理解我做错了什么吗？另外，使用以下示例，有人可以帮助我了解何时使用 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>

【问题讨论】：

使用大写的组件名称！否则它们将被视为 DOM 元素！
这可以帮助stackoverflow.com/questions/30373343/…

标签： javascript reactjs jsx babeljs

【解决方案1】：

嘿，伙计，我对你的代码做了一些重构，也许看看 react 文档，不管怎样，这都是你的代码

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

【讨论】：

这是问题的答案吗？
@Cruiser 我正在帮助编写代码
@DimitrisKirtsios 我是这项技术的新手，非常感谢您的帮助，谢谢
@anonymous 没问题，也可以试试文档，因为任何其他问题反应都有很好的记录

【解决方案2】：

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

您应该使用像 babel 这样的转译器：https://babeljs.io/

转换代码后，您只需编写 javascript，这样您就可以使用脚本类型“text/javascript”而不是“text/jsx”或“text/babel”。

以下是如何在组件中渲染组件的示例。

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

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

【讨论】：

非常感谢@socketwiz。它确实清除了很多东西。还有一个小查询，当我尝试将“应用程序”和“子组件”保存在 2 个不同的文件中并导入子组件时，我在控制台中收到错误“未定义要求”。有什么想法，为什么？
是的，你需要一种方法来定义 require 和 import。很多人为此使用 webpack (webpack.js.org)，但现在你进入了深水区。作为初学者，我会推荐类似“Create React App”之类的东西，它会为你管理所有这些，所以你只需要担心你的代码（github.com/facebookincubator/create-react-app）。