Блог

Я использую react, и у меня есть этот компонент piano (из внешней библиотеки), который реагирует. В моем приложении у меня есть 3 разных «уровня», которые приводят к разным диапазонам этого пианино, что означает, что горизонтальная длина пианино изменяется в зависимости от уровня (сложнее означает более широкий диапазон).

Я обернул отзывчивое пианино с помощью piano-div.

Я хочу, чтобы высота piano-div была одинаковой, поэтому кнопки уровня не будут перемещаться при переключении между ними. Но я также хочу, чтобы пианино как можно больше покрывало страницу по горизонтали (с небольшим пробелом по бокам).Я подошел к этому, добавив дополнение:

 .piano-div {
  position: relative;
  padding: 8% 30%;
}

.responsive-piano{
  position: absolute;
  top: 45%;
  -ms-transform: translateY(-45%);
  transform: translateY(-45%);
}
 

Проблема в том, что он пропорционален для «простого» уровня, но остальные 2 слишком малы, и они действительно могут идти дольше по горизонтали. Я пытался играть с заполнением / полями нескольких задействованных элементов, но ничего не получалось (отзывчивое пианино действительно портится, если вы его касаетесь).

Я также попытался выполнить манипуляции с DOM и изменить заполнение в соответствии с выбранным уровнем на основе этого css:

 .piano-div {
  position: relative;
}

.piano-div.easy {
  padding: 8% 30%;
}

.piano-div.hard {
  padding: 8% 5%;
}

.piano-div.crazy {
  padding: 8% 5%;
}
 

К сожалению, это работает не гладко, при переключении с простого на жесткий, пианино перемещается влево:

Если я перемещаю всю страницу, она немного «обновляется», а затем выглядит нормально:

Но, очевидно, я хочу, чтобы это работало без перемещения страницы 🙂

Есть идеи, как это исправить? Или, может быть, идея для другого подхода?

Обновить:

Это соответствующий HTML-код:

App.js:

 <div className={"piano-div "   currGame.level}>
                  <ResponsivePiano className='responsive-piano' noteRange={LevelConf[currGame.level].noteRanges}
                  handleGuess={this.handleGuess} activeNotes={winningChord.activeNotes} audioContext={audioContext}/>
                </div>
 

ResponsivePiano.js:

 function ResponsivePiano(props) {
  const { noteRange, handleGuess, activeNotes, audioContext } = props;
  return (
    <DimensionsProvider>
      {({ containerWidth, containerHeight }) => (
        <SoundfontProvider
          instrumentName="acoustic_grand_piano"
          audioContext={audioContext}
          hostname={soundfontHostname}
          handleGuess={handleGuess}
          render={({ isLoading, playNote, stopNote }) => (
            <Piano
              noteRange={noteRange}
              width={containerWidth}
              playNote={playNote}
              stopNote={stopNote}
              disabled={isLoading}
              activeNotes={activeNotes}
              {...props}
            />
          )}
        />
      )}
    </DimensionsProvider>
  );
}
 

Вместо этого я бы выбрал flexbox.

 .piano-div {
  display: flex,
  justify-content: center,
  align-items: center
}
 

Таким образом, ваш компонент piano всегда будет центрирован по вертикали и горизонтали.