тег исчезает в сафари из-за encodeURI () - PullRequest
Новая
       49

тег исчезает в сафари из-за encodeURI ()

1 голос
/ 21 марта 2020


Я создал карту, которая показывает случайные цитаты. Под карточкой должна быть ссылка на твит. Я использовал материализацию CSS для создания этой карты. (https://materializecss.com/cards.html => базовая c карта)

Проблема:
Работает в chrome, но в сафари весь тег исчезает. После отладки я обнаружил, что проблема с href с encodeURI (), но, согласно Google Safari, поддерживает encodeURI ().

React. js Код: 

import React from 'react'
import '../../styles/quote.css'
const Quote = ({ assignNewQuoteIndex, selectedQuote }) => {
    return (
        <div id="startSpace">
            <div className="row">
                <div className="col s10 offset-s1 m8 offset-m2 l6 offset-l3">
                    <div className="card">
                        <div className="card-content">
                        <div className="row">
                                <div className="right">
                                    <a href='!#' onClick={assignNewQuoteIndex}>
                                        <i className="material-icons hoverable" id="refresh" >autorenew</i>
                                    </a>
                                </div>
                        </div>
                        <span className="card-title">"{selectedQuote.quote}"</span>
                        <p>-{selectedQuote.author}</p>
                        </div>
                        <div className="card-action">
                            <a className="center btn-small" target="_blank" rel='noopener noreferrer'
                            href={encodeURI(`https://twitter.com/intent/tweet?text="${selectedQuote.quote}" - ${selectedQuote.author}&hashtags=MohrQuotes`)}
                            ><i className="fa fa-twitter" id="tweet"></i>  Tweet</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Quote

CSS

.card{
    background-color:#2B2928;
    font-family: "Playfair Display", serif;
    color: #fff;
}
#btnSmall{
    background-color:#fff;
    color: #2B2928;
    font-weight: 500;
}

#startSpace{
    padding-top: 3vw;
    padding-bottom: 1vw;
}
#refresh{
    text-decoration: none;
    font-size: 1.3rem;
    color: #fff;
    cursor: pointer;
}

Когда я удаляю эту строку или использую обычный href (например, href = "#"), кнопка будет отображаться в сафари: 

    href={encodeURI(`https://twitter.com/intent/tweet?text="${selectedQuote.quote}" - ${selectedQuote.author}&hashtags=MohrQuotes`)}


Большое спасибо!

...