Question

我有以下反应代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="react-15.1.0.js"></script>
    <script src="react-dom-15.1.0.js"></script>
</head>
<body>
<div id="content"></div>
<script>
    var HelloWorld = React.createClass({
        render: function () {
            return React.DOM.h1(null, "Hello world!!");
        }
    });
    ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));

</script>


</body>
</html>

这很有效。

现在我想将HelloWorld类插入ReactDOM.render函数

在遗留的React中，我可以像这样写：

ReactDOM.render(<HelloWorld/>,
     <HelloWorld/>,
     <HelloWorld/>,
     <HelloWorld/>, 
     document.getElementById("content"));

请帮我为我的图书馆版本编写模拟

Answer 1

ReactDOM.render只接受两个属性，React元素和DOM选择器。

因此，您需要将四个HelloWorld包装成单个div。

JSX：

ReactDOM.render(<div>
  <HelloWorld />
  <HelloWorld />
  <HelloWorld />
  <HelloWorld />
</div>, document.getElementById("content"))

反应元素：

 ReactDOM.render(React.createElement("div", null,
        React.createElement(HelloWorld),
        React.createElement(HelloWorld),
        React.createElement(HelloWorld),
        React.createElement(HelloWorld)
), document.getElementById("content"));

jsbin output

如何将类多次插入渲染方法？

1 个答案: