Question

我只是想知道我是否有任何方式可以画出＆＃34;在我的index.html多个<div id = "x" /> <div id = "y" />中使用REACT，我的意思是......我的所有网站都在index.html上，包含我的所有模板，因此我只需要在特定部分使用REACT ...

我试过这个我没有工作

HTML

<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>

JSX

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return (<h1>App</h1>);
  }
}
class Test extends React.Component {
  render () {
    return (<h1>Test</h1>);
  }
}

render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));

然后当我加载页面时只打印<h1>Test</h1> ...为什么？

Answer 1

您可以创建一个新组件并从中进行调用。

import App from "./App";
import Test from "./Test";
class Program extends React.Component {
  render() {
    <div>
      <div id="app"><App /></div>
      <div id="test"><Test /></div>
    </div>
  }
}

然后致电

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

Answer 2

我创建了一个JSFiddle来尝试一些事情：http://jsfiddle.net/pof580fd/1/

我发现通过明确关闭每个<div>标签，我可以让它起作用，即：

<div id="test"></div>
<div id="app"></div>

我做了一些研究，看来由于div不是HTML5“void elements”之一（在此列出：https://www.w3.org/TR/html5/syntax.html#void-elements），它不是自动关闭的，你必须使用{{ 1}}。有关详细信息，请参阅此SO问题：Are (non-void) self-closing tags valid in HTML5?

可能有些浏览器对此很宽容（我现在正在使用Chrome 52） - 但React不是，它出现了。我在控制台中看到的错误消息是：

</div>

（确保您使用React的“dev”版本来查看这些）

Answer 3

我们创建了一个框架来取得巨大成功。

查看React Habitat。

有了它，您只需注册组件，例如：

container.register('SomeReactComponent', SomeReactComponent);

然后他们通过以下方式在dom中自动解决：

<div data-component="SomeReactComponent"></div>

反应|多个渲染

3 个答案: