‹Link› из реактивного маршрутизатора внутри ‹Segment› из семантического-пользовательского интерфейса

Я определил модальное окно для мобильного представления в моем приложении для реагирования, используя библиотеку semantic-ui-react. Модальное окно состоит из набора тегов Segment, которые направляют на определенную страницу с помощью тега Link от response-router. Функциональность работает нормально, как я и предполагал, но я столкнулся с проблемой в пользовательском интерфейсе. Тег Segment занимает всю доступную ширину экрана, а тег Link занимает только пространство, содержащее текст. Теперь, если я нажимаю Сегмент, ничего не происходит, но когда я нажимаю текст внутри этого Сегмента, он перенаправляется на нужную страницу. Очевидно, проблема здесь в том, что тег Link преобразуется в тег привязки, который занимает только пространство вокруг текста, в то время как тег Segment преобразуется в тег div, занимающий всю ширину экрана.

Я пробовал использовать {{display: inline-block}} в теге Link в теге Segment, как это делают люди с тегом anchor в div , но у меня это не сработало. Какие-либо предложения?

Вот код, который у меня сейчас есть:

<Modal 
        trigger={<Button color="black" onClick={open}><Icon name="bars"/></Button>}
        open={modalOpen}
        onClose={close}
        basic
        size='small'>

        <Modal.Content>
          <Modal.Description>
            <Segment>
              <Link onClick={close} to='/login' style={{ color: '#000', display: 'inline-block' }}>{tt('navigation.login')}</Link>
            </Segment>
          </Modal.Description>
        </Modal.Content>

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


reactjs semantic-ui-react
person Harris    schedule 09.08.2018    source источник
comment
Каково ваше ожидаемое поведение? Вы описали текущее поведение, но как должны себя вести элементы?   -  person Jemi Salo    schedule 09.08.2018
comment
Извините, если я не понял, я хочу, чтобы сегмент в модальном окне был полностью интерактивным, а не только там, где находится текст.   -  person Harris    schedule 10.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите, чтобы весь сегмент стал ссылкой, вам нужно использовать опору as.

<Segment 
  as={Link} 
  style={{display:'block'}} 
  to='your/route/here' 
/>
person brianespinosa    schedule 09.08.2018
comment
Вам нужно будет поделиться своей разметкой, чтобы я увидел, что у вас сейчас есть, чтобы иметь возможность прокомментировать это. Приведенный выше пример в основном просто отображает сегмент как ссылку, а не то, что вы в настоящее время визуализируете как ссылку. Если вы обновите свой вопрос примером JSX, я смогу лучше ответить на это. - person brianespinosa; 10.08.2018
comment
Я добавил фрагмент кода вместе с изображением, чтобы помочь вам лучше понять, что я пытаюсь сделать. - person Harris; 10.08.2018
comment
Итак, вы говорите, что не хотите, чтобы сам сегмент был ссылкой и имел событие onClick для вашего обработчика события закрытия, а вместо этого вы хотите иметь полную ширину строки, которую, как вы думаете, текст должен быть доступен для щелчка? По умолчанию тег привязки <a> имеет display тип inline. Если вы измените его на inline-block, он только добавит некоторые атрибуты уровня блока, но все равно не займет всю ширину родительского контейнера. Если вы добавите display: block в качестве стиля к этой ссылке, тогда тег <a> примет всю ширину родительского элемента. - person brianespinosa; 10.08.2018
comment
Обратите внимание, что заполнение сегмента по-прежнему не будет связывать или закрывать модальное окно. Это может сбить с толку пользователя. Вы все еще можете переместить свои onClick, as и to реквизиты в Сегмент. - person brianespinosa; 10.08.2018
comment
Нет, я просто хочу, чтобы тег сегмента вел себя как тег ссылки, но сохранял свои исходные размеры. Я пробовал, как вы упомянули в своем исходном ответе, и с этим сегментом, уменьшенным до размеров тега ссылки. Я хочу, чтобы все пространство по умолчанию, доступное для тега сегмента, работало как ссылка. - person Harris; 10.08.2018
comment
Ах. Теперь я понимаю, о чем вы спрашиваете. Вы должны поместить этот display:block в компонент "Сегмент", если вам не нужен тип отображения inline-block. Я обновлю свой ответ, чтобы вы это увидели. - person brianespinosa; 10.08.2018
comment
Ваше предложение display: block сработало для меня. Большое спасибо за вашу помощь. Я просто добавил его в свой существующий тег Link, и он занял все пространство, доступное для тега сегмента, и на него также можно нажимать во всем сегменте, как я и хотел. Я действительно застрял там, еще раз большое спасибо. - person Harris; 10.08.2018
comment
Пожалуйста. Это ВСЕГДА будет происходить каждый раз, когда у вас есть элемент с типом отображения inline или linline-block. Если вы хотите, чтобы что-то занимало всю ширину родительского контейнера, вам нужно использовать блок типа отображения. :) - person brianespinosa; 10.08.2018
comment
Да, думаю, мне следует уделять больше внимания стилю CSS. Всегда приятно учиться у пожилых людей, спасибо, дружище :) - person Harris; 10.08.2018