Question

如何在React变量global

中添加组件（不导入/导出到html）

示例

// HTML

<body>
    <div id="App"></div>

      <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
      <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
      <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></scrip   
      <script>
        var App, Search
      </script>

      <script type="text/babel" src="component/App.js"></script>
      <script type="text/babel" src="component/Search.js"></script>
  </body>

// App.js

var App = React.createClass({
    render: function() {

        var styles = {
            margin: '0 auto',
            border: '1 px solid red',
            width: '50%'
        };

        return (
          <div style={styles}>
                <h1>sdadasssd!</h1>
                <p>fgfgfgfggf</p>
          </div>
        );
    }
});

// Search.js

var Search = React.createClass({
   render: function() {
    var styles = {fontSize: '1.5em', width: '90%', maxWidth: '350px'};
    return <input
             type="text"
             placeholder="gfgff"
             style={styles}
            />
  }
});

如何在React变量global

中添加组件（不导入/导出到html）

Answer 1

如果通过添加你的意思是渲染到html，请使用：

ReactDOM.render(
  <App />,
  document.getElementById('App')
);

演示：

var App = React.createClass({
    render: function() {

        var styles = {
            margin: '0 auto',
            border: '1 px solid red',
            width: '50%'
        };

        return (
          <div style={styles}>
                <h1>sdadasssd!</h1>
                <p>fgfgfgfggf</p>
          </div>
        );
    }
});

ReactDOM.render(
  <App />,
  document.getElementById('App')
);

<div id="App"></div>

<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js">
<script>
  var App, Search
</script>

<script type="text/babel" src="component/App.js"></script>

如何在React变量global中添加组件（不导入/导出到html）

1 个答案: