ReactJs - 显示组件周围的组件

Question

我想在组件周围显示特定数量的组件。我怎样才能做到这一点？ :)

通过这个实现，我绘制了8个Patrat组件

{Array.from(Array(8)).map((item, index) =>
    (<Patrat key={index}/>)
)}

我想在圆圈周围显示这8个Patrat，这也是一个组件。

Answer 1

了解问题后，您需要的是最终解决方案

您还可以创建可以动态创建位置并将其传递给子组件的函数

Here is complete code resource link (Click Here)

您也可以在上面给出的代码链接中尝试一些注释行

Answer 2

您可以创建一个递归循环，在其中创建一个新的Patrat组件，其递归调用为children。

例

function Patrat({ children }) {
  return (
    <div
      style={{
        paddingLeft: 10,
        backgroundColor: "#" + Math.floor(Math.random() * 16777215).toString(16)
      }}
    >
      {children}
    </div>
  );
}

function App() {
  const content = (function patratLoop(num) {
    if (num === 0) {
      return <div> Foo </div>;
    }
    return <Patrat>{patratLoop(--num)}</Patrat>;
  })(8);

  return content;
}

ReactDOM.render(<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"></div>

Answer 3

你可以让圆圈负责定位元素，然后让Patrats成为圆的子项（Circle > div.circle_element_position > Patrat）或者如果Patrats会根据父组件改变，你可以使用相同的逻辑但是使用renderProps作为Patrats（Circle > div.circle_element_position > props.renderPatrat(index)）

看起来或多或少会像这样：

function Partat()  {
   return <div>1</div>
}

function calculatePositions(numberOfPatrats) {
     //your implementation
}

function Circle ({numberOfPatrats}) {
       let positions = calculatePositions(numberOfPatrats);

       return <div className="circle">
            {positions.map(
                (position, index) => <div style={position} key={index}><Partat /></div>
            )}
       </div>
}

要将零件放置在您想要的位置上，您只需要实现计算位置，这与您在jsfiddle示例中的位置类似。