div 元素的 href 属性在 React 钩子中不起作用

Question

我正在尝试使用 React Hooks 制作一个 Breaking Bad Character 信息应用程序。 我希望它 go 到一个新选项卡并在我单击字符卡时搜索字符。 但是当我点击它时，任何事情都会发生。 这是我的卡片组件：

 const CardCharacter = ({ character }) => { var googleSearch = "https://www.google.com/search?q=" + `${character.name}`; return ( <div className="card my-4" href={googleSearch} target="_blank"> <div className="card-inner"> <div className="card-front"> <img className="card-image" src={character.img} alt={character.name} /> </div> <div className="card-back mt-3 px-1"> <h3 className="my-2">{character.name}</h3> <p className="my-1"><strong className="text-title">Played By: </strong>{character.portrayed}</p> <p className="my-1"><strong className="text-title">Nick Name: </strong>{character.nickname}</p> <p className="my-1"><strong className="text-title">Occupation: </strong>{character.occupation}</p> <p className="my-1"><strong className="text-title">Status: </strong>{character.status}</p> <p className="my-1"><strong className="text-title">Birthday: </strong>{character.birthday}</p> </div> </div> </div> ); } export default CardCharacter;

我使用 Google React Developer Tool 检查它：

Answer 1

您需要使用<a>标签。

const CardCharacter = ({ character }) => {
        var googleSearch = "https://www.google.com/search?q=" + `${character.name}`;
        return (

        <a  href={googleSearch} target="_blank">
             <div className="card my-4">
            <div className="card-inner">
                <div className="card-front">
                    <img className="card-image" src={character.img} alt= 
                     {character.name} />
                </div>
                <div className="card-back mt-3 px-1">
                    <h3 className="my-2">{character.name}</h3>
                    <p className="my-1"><strong className="text-title">Played By: </strong>{character.portrayed}</p>
                    <p className="my-1"><strong className="text-title">Nick Name: </strong>{character.nickname}</p>
                    <p className="my-1"><strong className="text-title">Occupation: </strong>{character.occupation}</p>
                    <p className="my-1"><strong className="text-title">Status: </strong>{character.status}</p>
                    <p className="my-1"><strong className="text-title">Birthday: </strong>{character.birthday}</p>
                </div>
            </div>
        </div>
        </a>

    );
}
export default CardCharacter;

阅读： https://www.w3schools.com/tags/tag_a.asp