如何将子元素附加到 React 元素？

Question

我想用循环将孩子附加到我的主 div

let mainContainer = React.createElement("div", { className: "contexCon" });

像这样

for(let i = 0; i < 3; i++){
    mainContainer.appendChild(child[i]) // this will not work just as example
}

Answer 1

React.createElement有一个这样的签名：

React.createElement(
  type,
  [props],
  [...children]
)

所以第三个参数应该是你的孩子的数组。在你的例子中，你似乎可以这样做：

let mainContainer = React.createElement("div", { className: "contexCon" }, child);

const headline = React.createElement('h1', {}, 'Hello, World!');
const body = React.createElement('p', {}, 'Lorem ipsum dolor sit amet');
const X = React.createElement('div', {}, [headline, body]);

ReactDOM.render(X, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

如果你想用循环处理的数据制作孩子，你把你的数据放在状态。您可以在组件构造函数中获取 API 或其他内容。

你说的是循环，但我很确定这意味着将孩子放到 div 元素的循环。所以，如果你使用Array.prototype.map()会更简单

class App extends React.Component {
  constructor() {
    super();
    // the data 
    this.state = {
      children: [
        {key: 1, name: "Hello"},
        {key: 2, name: "World"},
        {key: 3, name: "etc"}
      ]
    }
  }
  render() {
    // the loop. it'll return array of react node.
    const children = this.state.children.map((val) => {
      return (
        <p id={val.id}>{val.name}</p>
      )
    });
    // the div with children inside
    return (
      <div className="contexCon">
        {children}
      </div>
    );
  }
}

// render your app
const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

基于函数的元素，没有 JSX。

function App() {
  // the data
  const childrenData = [
        {key: 1, name: "Hello"},
        {key: 2, name: "World"},
        {key: 3, name: "etc"}
      ];
  // the loop
  const children = childrenData.map((val) => {
    return (
      React.createElement("p", {id: val["key"]}, val["name"])
    )
  })
  // the div with children inside
  return (
    React.createElement("div", {className: "contexCon"},
      children
    )
  )
}

// render
ReactDOM.render(React.createElement(App, {}), document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">