reactjs - 如何在此 Codesandbox 中从 TSX 转换为 JSX

问题描述

我正在学习 React 和 JavaScript，现在我有了这个CodeSandbox，但我无法将它转换为 JavaScript React 我已经为Card组件尝试过这个：

import React, { useState } from "react";

const Card = props => {
  const [expanded, setExpanded] = useState(false);

  const RenderCard = (className) => {
    return (
      <div
        className={`card ${className}${expanded ? " expanded" : ""}`}
        onClick={() => {
          setExpanded(!expanded);
        }}
      >
        <div className="image">
          <img alt="digger" src={props.image} />
        </div>
        <div className="info">
          <div
            className="bg1"
            style={{ backgroundImage: "url('" + props.image + "')" }}
          />
          <div
            className="bg2"
            style={{ backgroundImage: "url('" + props.image + "')" }}
          />
          <div
            className="bg3"
            style={{ backgroundImage: "url('" + props.image + "')" }}
          />

          <h1>JCB OES System</h1>
          <h2>Report Number #1</h2>
          <h3>Load lifter work area</h3>

          <div className="button">Open</div>
        </div>
      </div>
    );
  };

  return (
    <div className={`card-container${expanded ? " expanded" : ""}`}>
      {expanded && <div className="background" />}
      {<RenderCard className="card1"/>}
      {<RenderCard className="card2"/>}
    </div>
  );
};

export default Card;

我展示了Card这样的东西。这很简单，只是当我点击一张卡片时，它不会像 CodeSandbox 那样弹出。

import Card from "./Card";
import "./styles.scss";

const CreateContent = () => {
 
  return (
    <div className="app">
      <link rel="stylesheet" href="https://use.typekit.net/jli8mqj.css" />

      <Card image="https://www.thetimes.co.uk/imageserver/image/methode%2Fsundaytimes%2Fprodmigration%2Fweb%2Fbin%2Fbeae8dfb-0a41-4f8e-b076-ffd68417287b.jpg?crop=1024%2C683%2C0%2C0&resize=685" />
      <Card image="https://www.virginexperiencedays.co.uk/content/img/product/large/PJCBRA__01.jpg" />
      <Card image="https://www.toyfarmers.co.uk/images/britains-jcb-3cx-backhoe-loader.jpg" />
      <Card image="https://seatylive.blob.core.windows.net/eventimages/2019-Aug-20-Tue_18-37-31-969.png" />
    </div>
  );
};

export default CreateContent;

样式是相同的，没有变化：我知道expanded background当设置为expanded=true使用钩子时，背景的 scss 样式应该生效，但我得到的只是黑屏。

.app {
    font-family: sans-serif;
    text-align: center;
    padding: 4em 0;
  }
  
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
  }
  
  .card-container {
    font-family: niveau-grotesk, sans-serif !important;
    position: relative;
    z-index: 0;
    
    &.expanded {
      z-index: 3;
  
      @keyframes fade-in {
        0%   { opacity: 0; }
        100% { opacity: 1; }
      }
  
      .background {
        animation: fade-in .3s ease-out;
        z-index: 2;
        position: fixed;
        background: black;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
      }
    }
  
    .card {
      margin: 0 auto;
      width: 25em;
      cursor: pointer;
      border-radius: .5em;
      box-shadow: 0 50px 100px -20px rgba(50,50,93,.25), 
        0 30px 60px -30px rgba(0,0,0,.3), 
        0 -18px 60px -10px rgba(0,0,0,.03);
      margin-bottom: 4em;
  
      &.card2 {
        transition: .2s ease-out;
        position: absolute;
        top: 0;
        width: 25em;
        left: 50%;
        z-index: 4;
        transform: translateX(-50%);
  
        &.expanded {
          width: 40em;
        }
      }
    
      .image {
        img {
          display: block;
          border-top-left-radius: .5em;
          border-top-right-radius: .5em;
          width: 100%;
        }
      }
  
      $button-color: rgb(87, 87, 228);
  
      &:hover {
        .info .button {
          color: white;
          background: $button-color;
        }
      }
  
      .info {
        background: white;
        position: relative;
        border-bottom-left-radius: .5em;
        border-bottom-right-radius: .5em;
        overflow: hidden;
        padding: .9em 1.2em;
        text-align: left;
  
        $darkness: 0;
  
        &:after {
          content: '';
          position: absolute;
          top: -20%;
          left: -20%;
          right: -20%;
          bottom: -20%;
          height: 140%;
          width: 140%;
          // filter: blur(8px);
          // -webkit-filter: blur(8px);
          background: linear-gradient(to right, 
            rgba(0, 0, 0, 0.4) 30%, 
            rgba(0, 0, 0, 0) 100%);
        }
  
        .bg1, .bg2 {
          position: absolute;
          top: -20%;
          left: -20%;
          right: -20%;
          bottom: -20%;
          height: 140%;
          width: 140%;
          z-index: 0;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100%;
          transform: rotate(180deg);
          filter: blur(16px);
        }
  
        .bg2 {
          background-position: bottom;
          transform: rotate(0deg);
          opacity:0.4;
        }
  
        .bg3 {
          background-position: top;
          transform: rotate(180deg);
          opacity:0.4;
        }
  
        .button {
          transition: .2s ease-out;
          text-transform: uppercase;
          line-height: 1.2em;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 1.8em;
          z-index: 1;
          background: white;
          border-radius: 1em;
          padding: .4em 1.1em;
          font-weight: 600;
          color: $button-color;
        }
  
        h1, h2, h3 {
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          max-width: 13em;
          color: white;
          position: relative;
          z-index: 1;
          text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
        }
  
        h1 {
          line-height: .8em;
          letter-spacing: .03em;
          font-size: 1.1em;
          font-weight: 900;
          padding: .1em 0;
        }
  
        h2 {
          letter-spacing: .02em;
          font-size: 1.0em;
          font-weight: 400;
          padding: .1em 0;
          opacity: 0.6;
        }
  
        h3 {
          letter-spacing: .02em;
          font-size: .9em;
          font-weight: 400;
          padding: .1em 0;
        }
      }
    }
  }

我错过了什么？

标签： reactjsnode-sass

reactjs - 如何在此 Codesandbox 中从 TSX 转换为 JSX

问题描述

解决方案

推荐阅读