如何动态多次渲染组件答案

【问题标题】：How to render a component multiple times dynamically如何动态多次渲染组件
【发布时间】：2020-07-20 12:47:35
【问题描述】：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState('')
  return (
    <div>
      {
        ['heni', 'mezi', 'dave'].map(name => {
          return <button onClick={() => setName(name)}>{name}</button>
        })
      }
      {name && <NewWindowDisplayer><h1>{name}</h1></NewWindowDisplayer>}
    </div>
  );
}


// mock implementation.
// Actually this component displays its children
// in a new window using ReactDOM.createPortal API.
function NewWindowDisplayer (props) {
  return <div>{props.children}</div>
}

每当点击一个新按钮时，我想创建一个新的NewWindowDisplayer 组件，这样每个用户的数据都会显示在不同的窗口中。如果名称有一个打开的窗口，我想使用它而不是创建一个副本。就像上面的例子一样，每个名称最多有 3 个新窗口。但是这个实现会创建一个 NewWindowDisplayer 并在它的 props 改变时更新它。

简而言之，我的问题是如何动态多次渲染组件，在这种情况下单击按钮。虽然我可以跟踪点击的项目并基于它渲染组件（点击项目的数组，然后遍历数组并渲染组件），NewWindowDisplayer 有点复杂，我不想每次都渲染它单击了一个新按钮。

有没有其他方法可以做到这一点？

https://codesandbox.io/s/gallant-sunset-li0co?file=/src/App.js

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我想这就是你要找的东西


export default function App() {
  // Prepare data
  const names = ['heni', 'mezi', 'dave'];
  const [show, setShow] = useState([])  // Set which to show

  // Render
  return (
    <div>
      { // Create button for each name
        names.map(name => (
            <button 
                onClick={() => setShow(shown => [...shown, name])}   // Add new name into shown
                key={name} // Also dont forget to use keys
            >{name}</button>
        ))
      }
      { // Filter which should be shown & map
        names.filter(name => show.includes(name)).map(name => (
          <NewWindowDisplayer key={name}><h1>{name}</h1></NewWindowDisplayer>
        ))
      }
    </div>
  );
}

【讨论】：

我不想为现有的组件创建组件，因为它的逻辑有点复杂。我只想在单击新按钮时创建一个新组件。
这只会为那些被点击的人创建

【解决方案2】：

维护一个集合并在单击新按钮时将用户添加到其中。通过遍历集合来创建组件。

【讨论】：