реагируют бой: сделать узел емкости адаптивной матрицей макета мысли

Спрос настолько.

• Существует необходимость показать небольшую площадь нескольких элементов типа квадратных
• Относительно небольшое количество времени отображения в строке
• При сравнении количества отображения двух строк

Сетка с плохим, потому что, когда число нечетных строк, которые необходимо, когда два элемента по центру послушно.

С прогибается, а затем написать непосредственно вам нужно написать много суждений, из-за разное количество строк, когда структура страницы будет отличаться.

Таким образом, я думал использовать двумерный массив (матрицу), чтобы указать, в какое время думать о том, как отобразить.

 

Код.

// 波浪效果测试

импорт Реагировать из «реагировать» на 

импорт стилей из «./index.less' 

импорта Wave из » ../wave/index.js' 
импорта {Flex} от „antd-мобиля“ 

класс WaveContainer расширяет React.Component { 
  конструктор (реквизит) { 
    супер (реквизит) 
    это .state = { 
    } 
  } 

  визуализации () { 
    console.log ( это .props.dataBar) 

    Const baseFlex = { 
      дисплей: 'гибкий' , 
      justifyContent: 'центр' , 
      alignItems: ' центр'
    }
    Const theStyle = { 
      главная: { 
        ... baseFlex, 
        ширина: '17 .552vw ' 
        высота: '10 .521vw' , 
        цвет: "#fff" 
      }, 
      ТЭМ: { 
        ... baseFlex, 
        гибкий: "авто" , 
        цвет: '#fff' 
      }, 
      Shella: { 
        ... baseFlex, 
        ширина: '100%' , 
        высота: '100%' 
      }, 
      shellB: { 
        ... baseFlex, 
        ширина: '100%' ,
        рост:'50%» 
      } 
    } 

    Const Databar = это .props.dataBar 

    Const контейнер = ((Databar) => { 

      Const flexMatrix = [ 
        [ 0,0 ], 
        [ 1,0 ], 
        [ 2,0 ], 
        [ 3,0 ], 
        [ 2,2 ], 
        [ 3,2 ], 
        [ 3,3 ], 
        [ 4,3 ], 
        [ 4,4 ], 
        [ 5,4  ],
        [5,5 ], 
        [ 6,5 ], 
        [ 6,6 ] 
      ] 

      Const SDATA = dataBar.data.sData 
      длина Const = sData.length 

      Const матрица = flexMatrix [длина]? flexMatrix [длина]: flexMatrix [12 ] , 

      если (матрица [0] === 0 ) {
         возвращение "" 
      } 

      пусть temShell, TEMA, temB 

      TEMA . = sData.slice (0, матрица [0]) карта ((пункт, индекс) => 
        <DIV стиль = клавиша {theStyle.tem} = {index.toString ()}> <данные Волновые = {пункт} /> </ DIV> 
      ); 

      если (матрица [1] === 0 ) { 
        temB = "" 
      } еще { 
        temB = sData.slice (матрица [0], (матрица [0] + матрицы [1])). карта ((пункт, индекс) = > 
          <DIV стиль = клавиша {theStyle.tem} = {index.toString ()}> <данные Волновые = {пункт} /> </ DIV> 
        ); 
      } 

      Если (матрица [1] === 0 ) { 
        temShell = <DIV стиль = {theStyle.shellA}> {TEMA} </ DIV> 
      } еще { 
        temShell = [0,0] .map ((пункт, индекс) => 
          <DIV стиль = клавиша {theStyle.shellB} = { "temShell" + index.toString ()}> {индекс === 0 Tema: temB} </ DIV>         );


        theStyle.main.flexWrap = "обертка" 
      } 

      console.log (temShell) 
      
      вернуться temShell 
    }) (Databar) 

    возвращение (
       <DIV стиль = {theStyle.main}> 
        { / * <Wave /> * / } 
        {Контейнер}
       </ DIV>
     ); 
  } 
} 

Экспорта по умолчанию WaveContainer

 

Объясните немного.

• Разверните оператор, чтобы сделать более компактный стиль.
• flexMatrix  записываются данные матрицы.
• Tema, temB помещается контейнер линейных элементов.
• temShell ставится Tema, temB контейнер.
• theStyle.main.flexWrap = «обертка», так что элементы могут быть правильно завернуть.
• Действие делится объекты данных среза, делая те, линию только одну строку требуемых данных.
• [0,0] необходим потому, что два ряда, так что с массивом из двух элементов, с выходом карты JSX.

 

Затем код страницы из поступающих данных.

рендеринга () { 
    Const Databar = { 
         данные: { 
            SDATA: [ 
              {имя: 'а', данные: 55, цвет: 'RGB (79239223)' }, 
              {имя: 'B', данные: 5, цвет: 'RGB (79239223)» }, 
              {имя: 'C', данные: 36, цвет: 'RGB (79,239,223)' }, 
              {имя: 'D', данные: 476, цвет: 'RGB (87,207,30)' }, 
              {имя: 'е', данные: 226, цвет: 'RGB (79239223)' }, 
              {имя: 'F', данные: 273, цвет: 'RGB (251,211,36)'} 
            ] 
          } 
    } 

    Вернуться(
       <DIV = {имя класса} Styles.main> 
        <WaveContainer Databar = {Databar} /> 
      </ DIV>     ); 
  }

На самом деле, и у него не было никаких отношений. Поскольку объект передается непосредственно внутрь более элементала.

 

Выше.