javascript 如何使用jsx.element数组类型在React js上添加可点击元素？

hts6caw3 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(185)

我想让我的Reactjs元素上的一个数组类型组件使用JSX可点击组件。元素，但它似乎是错误的我做了第一个索引上的id：1的href标签，但它没有打开外部链接这里是我的代码：

const Movies: React.FC = () => {  
  const getMovies = (): JSX.Element[] => {
    return [{
      desc: "A tale of some people watching over a large portion of space.",
      id: 1,
      icon: "fa-solid fa-galaxy",
      href: "www.wikipedia.com",
      image: "https://images.unsplash.com/photo-1596727147705-61a532a659bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFydmVsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
      title: "Protectors of the Milky Way"
    }, {
      desc: "Some people leave their holes to disrupt some things.",
      id: 2,
      icon: "fa-solid fa-hat-wizard",
      image: "https://images.unsplash.com/photo-1535666669445-e8c15cd2e7d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bG9yZCUyMG9mJTIwdGhlJTIwcmluZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
      title: "Hole People"
    }, {
      desc: "A boy with a dent in his head tries to stop a bad guy. And by bad I mean bad at winning.",
      id: 3,
      icon: "fa-solid fa-broom-ball",
      image: "https://images.unsplash.com/photo-1632266484284-a11d9e3a460a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGhhcnJ5JTIwcG90dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
      title: "Pot of Hair"
    }, {
      desc: "A long drawn out story of some people fighting over some space. Cuz there isn't enough of it.",
      id: 4,
      icon: "fa-solid fa-starship-freighter",
      image: "https://images.unsplash.com/photo-1533613220915-609f661a6fe1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c3RhciUyMHdhcnN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
      title: "Area Fights"
    }].map((movie: any) => {
      const styles: React.CSSProperties = {
        backgroundImage: `url(${movie.image})`  
      }
      
      const id: string = `movie-card-${movie.id}`;
      
      return (
        <div key={movie.id} id={id} className="movie-card">
          <div class="container" className="movie-card-background background-image" style={styles} /><a href="https://www.w3docs.com/"></a><span class="link"></span>
          <div className="movie-card-content">
            <div className="movie-card-info">
              <span className="movie-card-title">{movie.title}</span>
              <span className="movie-card-desc">{movie.desc}</span>
              <span classNAme="movie-card-href">{movie.href}</span>
            </div>
            <i className={movie.icon} />
          </div>
        </div>
      );
    })
  }

正如你所看到的，我正在为我的网站复制这段代码，并且还在学习react js，谢谢
可点击的react js元素

JavaScript

来源：https://stackoverflow.com/questions/76396837/how-to-add-click-able-element-on-react-js-using-array-type-of-jsx-element

1条答案

按热度按时间

f45qwnt81#

要使React组件中的元素可点击，您可以将内容 Package 在<a>标记中，并为href属性提供所需的URL。但是，在您的代码中，您当前将<a>标记放置在 Package <div>元素之外，这将不会使整个卡片可单击。
要解决这个问题，您应该将整个内容 Package 在<a>标记中，并使用movie.href值动态提供href。下面是代码的更新版本：

const Movies: React.FC = () => {
  const getMovies = (): JSX.Element[] => {
    return [
      {
        desc: "A tale of some people watching over a large portion of space.",
        id: 1,
        icon: "fa-solid fa-galaxy",
        href: "https://www.wikipedia.com",
        image:
          "https://images.unsplash.com/photo-1596727147705-61a532a659bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFydmVsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
        title: "Protectors of the Milky Way",
      },
      // Rest of the movies...
    ].map((movie: any) => {
      const styles: React.CSSProperties = {
        backgroundImage: `url(${movie.image})`,
      };

      const id: string = `movie-card-${movie.id}`;

      return (
        <a key={movie.id} href={movie.href} className="movie-card">
          <div
            id={id}
            className="container movie-card-background background-image"
            style={styles}
          ></div>
          <span className="link"></span>
          <div className="movie-card-content">
            <div className="movie-card-info">
              <span className="movie-card-title">{movie.title}</span>
              <span className="movie-card-desc">{movie.desc}</span>
              <span className="movie-card-href">{movie.href}</span>
            </div>
            <i className={movie.icon} />
          </div>
        </a>
      );
    });
  };

  return <div>{getMovies()}</div>;
};

export default Movies;

在更新的代码中，我移动了<a>标记以 Package 整个卡片内容，并将href属性设置为movie.href。现在，单击电影卡将打开每个电影对象的href属性中指定的相应URL。

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 如何使用jsx.element数组类型在React js上添加可点击元素？

1条答案

相关问题

热门标签

最新问答