时间戳

首页 > 解决方案 > 无法转换 Figma 设计以做出反应

reactjs - 无法转换 Figma 设计以做出反应

问题描述

我正在尝试使用 anima 将基本的成功页面设计从 figma 转换为 reactcode。

import React from "react";

function success() {
  return (
    <Frame1
      ellipse2="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-2@2x.svg"
      ellipse1="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-1@2x.svg"
      maskGroup="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/mask-group@2x.svg"
      great="Great!"
      text1="Your payment was successfull"
      place="Okay"
    />
  );
}

export default success;


function Frame1(props) {
  const { ellipse2, ellipse1, maskGroup, great, text1, place } = props;

  return (
    <div className="frame-1">
      <div className="overlap-group1">
        <img className="ellipse-2" src={ellipse2} />
        <img className="ellipse-1" src={ellipse1} />
        <div className="typcntick smart-layers-pointers ">
          <img className="mask-group" src={maskGroup} />
        </div>
        <h1 className="great avenirnext-medium-black-48px">{great}</h1>
      </div>
      <div className="text-1 avenirnext-medium-black-24px">{text1}</div>
      <div className="overlap-group">
        <Rectangle1 />
        <div className="place avenirnext-demi-bold-white-36px">{place}</div>
      </div>
    </div>
  );
}


function Rectangle1() {
  return <div className="rectangle-1 smart-layers-pointers "></div>;
}

我已经从 anima 复制了 jsx 和 css 文件，现在我正在尝试将其导入我的应用程序。但我无法在我的应用程序上显示它。我该如何解决这个问题？

import React from 'react';
import  './success.css';
import success from './success';

const App = () => {

  return (
    <div>
      <success/>
    </div>
  );
}

export default App;

标签： reactjsfigma

解决方案

您导入和导出的成功组件应以 Success 之类的大写字母开头，然后只有 react 才知道它是一个组件

推荐阅读