PROSAGA码农传奇-html/HTML5-ReactJs - 显示组件周围的组件

0# 纾潆锦袖迷子 | 2019-08-31 10-32

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

<div class =“post-text”itemprop =“text”>
  <P>
    你可以让圆圈负责定位元素，然后让Patrats成为圆形的孩子（
     <code>
      Circle > div.circle_element_position > Patrat
    </code>
    ）或者如果Patrats将根据父组件进行更改，您可以使用相同的逻辑但使用
    <a href="http://reactjs.org/docs/render-props.html" rel="nofollow noreferrer">
      renderProps
    </A>
     为Patrats（
     <code>
      Circle > div.circle_element_position > props.renderPatrat(index)
    </code>
    ）
  </p>
  <P>
    看起来或多或少会像这样：
  </p>
   <pre>
    <code>
      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>
}

</code>
  </pre>
  <P>
    要将Parat放在您想要的位置上，您只需要实现calculatePositions，这与您在jsfiddle示例中的类似。
  </p>
</DIV>

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

<div class =“post-text”itemprop =“text”>
  <P>
    您可以创建一个递归循环，在其中创建一个新的循环
     <code>
      Patrat
    </code>
     具有递归调用的组件
     <code>
      children
    </code>
     它。
  </p>
  <P>
    的<strong>
      例
    </强>
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“true”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          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"));
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>