分类导航

程序问答发布时间：2022-05-31 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在此 Codesandbox 中从 TSX 转换为 JSX，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在此 Codesandbox 中从 TSX 转换为 JSX？

开发过程中遇到如何在此 Codesandbox 中从 TSX 转换为 JSX的问题如何解决？下面主要结合日常开发的经验，给出你关于如何在此 Codesandbox 中从 TSX 转换为 JSX的解决方法建议，希望对你解决如何在此 Codesandbox 中从 TSX 转换为 JSX有所启发或帮助；

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

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 那样弹出。@H_502_3@

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 样式应该有效，但我得到的只是黑色屏幕。@H_502_3@

.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,.3),0 -18px 60px -10px rgba(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.4) 30%,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.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;
        }
      }
    }
  }