ReactJs - отображать компоненты вокруг компонента

Question

Я хочу отобразить определенное количество компонентов вокруг компонента.Как я могу это сделать?:)

В этой реализации я рисую 8 компонентов Patrat

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

Я хочу отобразить эти 8 Patrat вокруг круга, который также является компонентом.

Answer 1

После того, как вы поймете, что вам нужно, вы найдете окончательное решение

Вы также можете создать функцию, которая может динамически создавать позицию и передавать ее дочерним компонентам

Вот полная ссылка на ресурс кода (нажмите здесь)

Также вы можете поэкспериментировать с некоторыми комментариями в приведенной выше ссылке на код

Answer 2

Вы можете сделать круг ответственным за позиционирование элементов, затем использовать 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>
}

Чтобы разместить Parats на нужных вам позициях, вам просто нужно реализовать Calculate, который будетпохоже на то, что было в вашем примере с jsfiddle.

Answer 3

Вы можете создать рекурсивный цикл, в котором вы создадите новый компонент 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>