Дочерний компонент React заставляет элементы сетки размещаться в следующей строке горизонтально расширяемой сетки до заполнения предыдущей строки.

Потерпите, так как проблему сложно четко описать.

У меня есть приложение, которое перечисляет "элементы" в сетке. Эта сетка достаточно велика, чтобы вместить только один элемент, но она расширяется с каждым новым элементом до пяти элементов, после чего новые элементы добавляются в следующую строку. Когда вторая строка достигает пяти элементов, следующий элемент помещается в строку 3.

Изначально у меня была статическая кнопка "добавить элемент" вверху страницы, но я решил, что было бы более разумно с практической и эстетической точки зрения сделать кнопку "добавить" последним "элементом" в сетке, чтобы при нажатии кнопки "добавить" она заменялась новым элементом. Это показалось более интуитивным, поскольку кнопка "добавить" находится там, где вы добавляете другой элемент.

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

Все работало нормально до использования этой схемы дочерних компонентов — и фактически все еще отлично работает с "элементами" в качестве дочерних компонентов компонентов "контейнер элементов". Однако, когда я добавляю "контейнер элементов" с кнопкой добавления в качестве дочернего компонента, эта кнопка добавления помещается в новую строку, несмотря на то, что предыдущая строка не была заполнена 5 элементами.

Что еще более странно, так это то, что когда я вставляю некоторый временный code, чтобы сделать кнопку добавления средним элементом в списке с более обычными элементами, идущими после нее, кнопка добавления появится в правильном месте в текущей строке, но все элементы после нее начнутся со следующей строки!

Здесь задействовано много codeа, поэтому я надеюсь, что кто-то может иметь представление об общей проблеме в том, как кто-то может попытаться реализовать это, что приведет к такому результату. Тем не менее, я сделаю все возможное, чтобы сократить его до наиболее релевантного codeа, чтобы вы имели некоторое представление о том, что я делаю.

App.tsx:

CoinSlot.tsx:

    type AddButtonProps = {
  onAddCoinSlot: () => void;
}

type CoinsListItemProps = {
  children: React.ReactNode,
  bordered?: boolean
}

const AddButton = function (props: AddButtonProps) {
  return(
    <>
      <input type="button" onClick = {props.onAddCoinSlot} value="+" id="add-button"></input>
    </>
  )
}

const CoinsListItem = (props: CoinsListItemProps) => {
  let borderedClassName = props.bordered ? " bordered" : "";
  return(
    <div className={"coin-slot" + borderedClassName}>
      {props.children}
    </div>
  )
}
  let coinList = coinsDataWithAddButton.map((coin, index) => {
    if(coin !== null){
      return(
        <CoinsListItem bordered={true}>
          <CoinSlot 
            id={index}
            coinTicker={coin.ticker}
            addressEntryIsOpen={coin.addressEntryIsOpen}
            availableCoins={availableCoins}
            coinImage={coin.image}
            address={coin.address}
            addressIsValid={coin.addressIsValid}
            isCustom={coin.rank === -1 ? true : false}
            onChangeCoin={onChangeCoin}
            onChangeAddress={onChangeAddress}
            onChangeLogo={onChangeLogo}
            onChangeTicker={onChangeTicker}
            onRemoveCoinSlot={onRemoveCoinSlot}
            toggleAddressEntryArea={onToggleAddressEntry}
            moveCoinSlot={moveCoinSlot}
            lines={coin.lines}
          />
        </CoinsListItem>
      )
    } else {
      return (
        <CoinsListItem>
          <AddButton onAddCoinSlot={onAddCoinSlot}/>
        </CoinsListItem>
      )
    }
  })

 return (

    <div className="App">
      <div className="debug">
      </div>
      <div className="app-box">
        <h1>Cryptowidget Builder</h1>
        <div className="coin-list-container">
          <AddButton onAddCoinSlot={onAddCoinSlot}/>
          <div className="coin-list">
            {coinList}
          </div>
        </div>
        <button onClick={onGenerateQrs} value="Get widget" disabled={generationIsDisabled}>Get widget</button>
        <button onClick={makeAllAddressesValid} value="Make addresses valid (for testing)">Make Addresses Valid</button>
      </div>
    </div>
  );

    return(
    <>
        <input type="button" className="remove-button" onClick = {onRemoveCoinSlot} value="X"></input>
        <img src={props.coinImage} id="background-image" alt="coin"></img>
        <div className="coin-slot-grid">
            <div className="move-button-container">
                <button className="move-button" onClick={moveCoinSlotLeft}>{"<"}</button>
            </div>
            <div className="coin-slot-options">
                <div className="select-area">
                    <select value={props.coinTicker || ""} className = "dropdown-menu" onChange={onChangeCoin}>
                        {coinOptions}
                    </select>
                </div>

                {addressEntryElement}
                <div className={customCoinOptionsClassName}>
                    <input type="text" onChange={onChangeTicker} value={props.customTicker} className="custom-ticker-entry" placeholder="ticker"></input>
                    <input type="file" id={"logo-chooser-" + props.id.toString()} className="logo-chooser" onChange={onChangeLogo} ></input>
                </div>
            </div>
            <div className="move-button-container">
                <button className="move-button" onClick={moveCoinSlotRight}>{">"}</button>
            </div>
        </div>
    </>
)