Динамический тег и key?

FabiBoom,

import React, { Component } from 'react';
import {NavLink, Link} from 'react-router-dom';
import logo from '../images/logo_dark.svg';

const MainHeader = (props = false) => {

    let data = {
        work: "Работаем: ПН-СБ",
        schedule: "9.00-19.00",
        supportEmail: "[e-mail]",
        links: {
            office: {
                href: '/office',
                caption: 'В кабинет',
                target: 'false'
            },
            registration: {
                href: '/registration/register',
                caption: "Зарегистрироваться",
                target: 'false'
            }
        },
        ...props
    };
    console.log("urlMenu", data)
    state = {
        menu: false
    };

    toggleMenu = () => {
        this.setState({
            menu: !this.state.menu
        })
    };
    const cls = [ "hamburger", "hamburger--spin"]
    if (open) {
        cls.push('is-active')
    }
    return (
        <header className="store-header header-default">
            <div className="container-fluid">
                <div className="header-default-box">
                    <Link key="anchLogo" to="/" className="store-header__logo"></Link>
                    <div className={ cls.join(' ') } onClick={ toggleMenu }>
                        <div className="hamburger-box">
                            <div className="hamburger-inner"></div>
                        </div>
                    </div>
                    <div className="header-default-support">
                        <span className="store-header__work">{data.work}<span>{data.schedule} </span></span>
                        <span className="store-header__support">
                            <a href={"mailto:" + data.supportEmail} >{data.supportEmail}</a>
                        </span>
                    </div>
                    <nav className="nav-default">
                        <ul className="nav-default-list">
                            <li>                                {
                                Object.values(data.links).map(({ href, caption,target }) => (
                                    <NavLink to={href} target={ target ? "_blank" : "_self" }>{caption}</NavLink>
                                ))
                            }</li>
                        </ul>
                    </nav>

                </div>
            </div>
        </header>
    );
}

export default MainHeader;

не могли бы подсказать почему гамбургер не открывается ?

Как проверить props?

Петр Мухуров,

let data = {
        work: "",
        schedule: "",
        supportEmail: "",
        menu:[
            {
                url: '',
                label: 'В кабинет',
                target: '_self'
            },
            {
                url: '',
                label: 'Зарегистрироваться',
                target: '_self'
            }
        ]
    }
    if (props){
        let data = props
    }

Я правильно понял ?

Динамический тег и key?

FabiBoom, Извените не могли бы еще немного подсказать, как в редьюсере реализовать событик оnChange, при в воде в инпуте ?,извините за назойливость.

Динамический тег и key?

спасибо вам))

Динамический тег и key?

FabiBoom,я поспешил немного с вопросом не раскрыв его полность., у меня со стора приходят дефолтные стили в обьекте styles width: 100, height: 100, не пойму как их дописать.
style: {
fontSize: "12px",
color: "red",
width: {
}

Динамический тег и key?

FabiBoom, А вы не могли бы подсказать , А как дописать инлан стили ?

Как по клику создать теги в react?

Петр Мухуров, работат)))Спасибо вам большое)))А как вас отметить решением ?

Как по клику создать теги в react?

Петр Мухуров, не могли бы пожалуйста подсказать как правитьно положить обьект в редьюсер, не получается((
import { ADD_DIV} from '../actions/actionTypes'

const initialState = {
elem: []
}

export default function(state = initialState , action) {
switch(action.type){
case ADD_DIV:
return{
elem: state.elem.push({ id: state.elem.length + 1, tag: 'div'})
}
default:
return state
}
}

Как по клику создать теги в react?

Петр Мухуров, предположим что ,это реальный конструктор сайтов(просто предположим,не более, промотрел видео уроки практикую навыки , не знал что придумать, вот придумал создать не большой конструктор сайтов :) так же хотел бы добавить возможность его редактирования, высоты ширины , цвета бг и просто редактирования , вставки текста вообщем как то так))То как быть тогда стор или локальный ?

Как по клику создать теги в react?

Петр Мухуров, я вас понял.Вы считаете что лучше это делать в локальном стейте ?

Как по клику создать теги в react?

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

Как можно сделать такое при скролле?

VegasChickiChicki, ого,это жостко.

Как проверить класс?

Максим Тимофеев, это не задание.

Как проверить класс?

Максим Тимофеев, Всмысле на фриланс ?

Как проверить класс?

Максим Тимофеев, https://jsfiddle.net/mg2ajkp7/

вот пример
Нужно что бы при попадании на класс active перестал раздавать классы у следующих но оставил классы у приведущих.

Как проверить класс?

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

Как реализовать данныйю блок?

RAX7,

onScroll: function onScroll() {
          s.scrollPosition = $(document).scrollTop();
          ProgressScroll.requestTick();
          var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
          var persent = parseInt(scrollPercentage * 100);
          var currentItemIndex = elementAtPersent(persent, mapItemsPersent);

          if (currentItemIndex !== -1) {
            mapItemsPersent[currentItemIndex].targetEl.classList.add('current');
            mapItemsPersent[currentItemIndex].targetEl.classList.remove('previous');

            for (var i = currentItemIndex - 1; i >= 0; i--) {
              mapItemsPersent[i].targetEl.classList.add('previous');
              mapItemsPersent[i].targetEl.classList.remove('current');
            }

            for (var _i = currentItemIndex + 1; _i < mapItemsPersent.length; _i++) {
              mapItemsPersent[_i].targetEl.classList.remove('current');
            }
          }

        },

Вот ваш код как в вашем примере залитом на jsfibble,
как возможно его реализовать до то того момента пока не встретиться класс active
тоесть как встретим класс active перестаем раздовать классы.

Как реализовать данныйю блок?

RAX7, Вы гений, только вот пришлось переделать svg(((
Как можно реализовать этот способ с добавлением класса только до класса active
например .blok .blok .blok .blok .blok как только встречаем .blok.active перестаем раздавать класс.
Только в реализации с данным скриптом что ниже.

var ProgressScroll = function () {
  var s = void 0;

  return {
    settings: function settings() {
      return {
        top: $('.progress-top'),
        right: $('.progress-right'),
        mid: $('.progress-mid'),
        left: $('.progress-left'),
        bottom: $('.progress-bottom'),
        top2: $('.progress-top2'),
        right2: $('.progress-right2'),
        mid2: $('.progress-mid2'),
        left2: $('.progress-left2'),
        bottom2: $('.progress-bottom2'),
        windowHeight: $(window).height(),
        windowWidth: $(window).width(),
        scrollHeight: $(document).height() - $(window).height(),
        progressTotal: $(window).height() * 2 + $(window).width() * 2,
        scrollPosition: $(document).scrollTop()
      };
    },
    init: function init() {
      s = this.settings();
      this.bindEvents();
    },
    bindEvents: function bindEvents() {
      $(window).on('scroll', this.onScroll);
      $(window).on('resize', this.onResize);

      this.progress();
    },
    onScroll: function onScroll() {
      s.scrollPosition = $(document).scrollTop();
      ProgressScroll.requestTick();
    },
    onResize: function onResize() {
      s.windowHeight = $(window).height();
      s.windowWidth = $(window).width();
      s.scrollHeight = $(document).height() - s.windowHeight;
      s.progressTotal = s.windowHeight * 2 + s.windowWidth * 2;

      ProgressScroll.requestTick();
    },
    requestTick: function requestTick() {
      requestAnimationFrame(this.progress);
    },
    progress: function progress() {
      var percentage = s.scrollPosition / s.scrollHeight;
      var width = s.windowWidth / s.progressTotal;
      var height = s.windowHeight / s.progressTotal;

      s.top.css('width', percentage / width * 100 + '%');
      s.right.css('height', (percentage - width) / height * 100 + '%');
      s.top2.css('width', percentage / width * 100 + '%');
      s.right2.css('height', (percentage - width) / height * 100 + '%');
      s.mid.css('width', (percentage - width - height) / width  * 100 + '%');
      s.mid2.css('width', (percentage - width - height) / width  * 100 + '%');
      s.left.css('height', (percentage - width - height - width) / height * 125 + '%');
      s.left2.css('height', (percentage - width - height - width) / height * 125 + '%');
      s.bottom.css('width', (percentage - width - height - width) / width * 220 + '%');
      s.bottom2.css('width', (percentage - width - height - width) / width * 200 + '%');
    }
  };
}();

// Init
$(function () {
  ProgressScroll.init();
});

Извините что я вас так нагружаю.

Как реализовать данныйю блок?

RAX7, https://jsfiddle.net/narkess/by5036ed/ на точки надо навешать класс, я уже 3 дня сижу., никак не получается.
Я там залил все , так как плывет все

Как реализовать данныйю блок?

RAX7, извените меня, я не совсем то имел веду, У меня свг с кодом в роли backgrounda а сверху наложен блок с блоками и при прохождении анимации при скроле поочереднопо змейке на каждый блок должен навешиваться класс с анимацией и кружок перерисовываться в галочку. Как на картинке.
Вот пример html кода который накладывается сверху на змейку.

<div class="project-mab-fg">
                <div class="project-map" id="test">
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">декабрь 2018</div>
                      <div class="project-item-text">Идея</div>
                    </div>
                  </div>
                  <div class="project-item project-item-bot">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">декабрь 2018</div>
                      <div class="project-item-text">Проработка плана</div>
                    </div>
                  </div>
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">январь/апрель 2019</div>
                      <div class="project-item-text">Разработка сайта</div>
                    </div>
                  </div>
                  <div class="project-item project-item-bot">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">январь/февраль 2019</div>
                      <div class="project-item-text">Регистрация/открытие компании</div>
                    </div>
                  </div>
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">январь/февраль 2019  </div>
                      <div class="project-item-text">Набор сотрудников</div>
                    </div>
                  </div>
                  <div class="project-item project-item-bot">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">январь/февраль 2019</div>
                      <div class="project-item-text">Подготовка всей документации и инструментов</div>
                    </div>
                  </div>
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">февраль 2019</div>
                      <div class="project-item-text">Производство карт</div>
                    </div>
                  </div>
                  <div class="project-item project-item-bot">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">март 2019</div>
                      <div class="project-item-text">Запуск официальных страниц в социальных сетях</div>
                    </div>
                  </div>
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">декабрь 2018</div>
                      <div class="project-item-text">Идея</div>
                    </div>
                  </div>