html/HTML5 ReactJs - 显示组件周围的组件 返回

ReactJs - 显示组件周围的组件


=_=
2025-03-14 07:23:15 (20天前)


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

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

{Array.from（Array（8））。map（（item，index）=＆gt;
（小于…

4 条回复
  1. 0# 纾潆锦袖迷子 | 2019-08-31 10-32



    的
    您可以为每个位置传递来自父级的道具，这些位置可以用作子组件中的样式以用于围绕圆圈的位置
    </强>



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



    请在下方查看样品：

    查看示例


  2. 1# CC-f | 2019-08-31 10-32



    你可以让圆圈负责定位元素，然后让Patrats成为圆形的孩子（

    Circle > div.circle_element_position > Patrat

    ）或者如果Patrats将根据父组件进行更改，您可以使用相同的逻辑但使用

    renderProps

    为Patrats（

    Circle > div.circle_element_position > props.renderPatrat(index)

    ）



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



    1.     
            function Partat()  {
         return 
      1

      }
    2. function calculatePositions(numberOfPatrats) {
           //your implementation
      }
    3. function Circle ({numberOfPatrats}) {
             let positions = calculatePositions(numberOfPatrats);
    4.    return <div className="circle">
    5.         {positions.map(
    6.             (position, index) => <div style={position} key={index}><Partat /></div>
    7.         )}
    8.    </div>
    9. }
    10. </code>
    11.


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


  3. 2# 特狼普 | 2019-08-31 10-32



    您可以创建一个递归循环，在其中创建一个新的循环

    Patrat

    具有递归调用的组件

    children

    它。



    的
    例
    </强>







    1.         
                function Patrat({ children }) {
        return (
          

            {children}
          

        );
      }
    2. function App() {
        const content = (function patratLoop(num) {
          if (num === 0) {
            return 
       Foo 
      ;
          }
          return {patratLoop(—num)};
        })(8);
    3.   return content;
      }
    4. ReactDOM.render(, document.getElementById(“root”));
              
            


    1.         
                

    4.





登录 后才能参与评论