Как сделать рекурсивный компонент в React? - PullRequest
Новая
       11

Как сделать рекурсивный компонент в React?

1 голос
/ 18 февраля 2020

Я пытаюсь сделать компонент рекурсивно. При каждом рекурсивном вызове я вычитаю 10 px из размеров. Я ожидаю серию вложенных div, каждый на 10px меньше. Когда высота и ширина достигают 10 пикселей, компонент должен возвращать ноль, так что это мой базовый случай.

Вместо ожидаемого результата у меня ничего нет. Нет ошибок в терминале, нет ошибок в инструментах разработки, только замороженная страница.

Есть мысли?

RecurentDiv.js: 

const RecurentDiv = ({ width, height }) => {
  const style = {
    width: `${width - 10}px`,
    height: `${height - 10}px`,
    border: "1px solid black",
    display: "inline-block"
  };

  if (width < 10) return null; //base case

  return (
      <div style={style}>
        <RecurentDiv width={style.width} height={style.height} />
      </div>
  );
};

export default RecurentDiv;

App.js: 

<RecurentDiv width={100} height={100} />

1 Ответ

3 голосов
/ 18 февраля 2020

Проблема здесь: 

<RecurentDiv width={style.width} height={style.height} />
                  //^^^^^^               ^^^^^^

style.width - это строка, а не число: ${width - 10}px. Код выполняет "100px" - 10, что оценивается как NaN, который затем передается в реквизиты следующих RecurentDiv. Базовый случай никогда не достигается.

Вместо этого передайте числа width и height непосредственно в рекурсивный компонент, вычитая сумму сокращения для приближения к базовому случаю.

Вот минимальный, полный пример: 

const RecurrentDiv = ({width, height}) => {
  const style = {
    width: `${width}px`,
    height: `${height}px`,
    border: "1px solid black",
    display: "inline-block"
  };

  return width < 10 ? null : (
    <div style={style}>
      <RecurrentDiv width={width - 10} height={height - 10} />
    </div>
  );
};

ReactDOM.render(<RecurrentDiv width={100} height={100} />, document.body);
<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>
...