Question

我希望能够基于PHP框架呈现的文档的HTML标记来安装React组件，但我找不到实现此目的的方法。

以下是我的文档的HTML标记：

<html>
<head>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="app">
        <Foo bar="lorem"></Foo>
        <Foo bar="ipsum"></Foo>
        <Foo bar="dolor"></Foo>
    </div>
<script src="js/index.js"></script>
</body>
</html>

这是Foo组件实现（foo.js）：

const React = require('react');

class Foo extends React.Component {
  render() {
    return React.createElement('div', {
      className: 'foo'
    }, `Hello ${this.props.bar}`);
  }
}

module.exports = Foo;

这是我的App实现（app.js）：

const React = require('react');
const ReactDOM = require('react-dom');

require('./foo');

ReactDOM.render(
  React.createElement('div'),
  document.getElementById('app')
);

module.exports = {};

我希望React以递归方式挂载#app div中找到的每个组件，但出于某种原因只挂载了#app div，导致以下标记：

<div id="app">
    <div data-reactroot=""></div>
</div>

我不能指责我在这里做错了什么。

Answer 1

所以，当你渲染反应DOM时你的app.js

ReactDOM.render(
  React.createElement('div'),
  document.getElementById('app')
);

在这种情况下，您正在创建一个div元素并使用id = app

将其呈现在root div中

为了创建多个foo元素，您只需要这个

const Foo = require('./foo');

ReactDOM.render(
  <div>
    <Foo bar="lorem"></Foo>
    <Foo bar="ipsum"></Foo>
    <Foo bar="dolor"></Foo>
  </div>
  document.getElementById('app')
);

希望这有帮助

React：如何在页面上挂载所有组件？

1 个答案: