Блог

Главная - Вопросы по программированию - Невозможно преобразовать дизайн Figma в react

Невозможно преобразовать дизайн Figma в react

#reactjs #figma

#reactjs #figma

Вопрос:

Я пытаюсь преобразовать базовый дизайн страницы успеха из figma в reactcode, используя anima.

 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>;
}

Я скопировал файлы jsx и css из anima и теперь пытаюсь импортировать их в свое приложение.
Но я не могу отобразить его в своем приложении. Как я могу это решить?

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

const App = () => {

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

export default App;

Комментарии:

1. В чем ошибка?

2. @Dominik Мое приложение react ничего не показывает. Он пустой.

3. Кажется, что нижний код, которым вы поделились, не имеет значения. Вы используете верхний пример?

4. @Dominik Да, я отредактировал его. Тем не менее, я получаю ту же пустую страницу.

5. Когда я запускаю ваш код выше, я получаю кучу зеленых циклов и немного текста. Конечно, не пустой… codesandbox.io/s/crazy-sutherland-n8qfz?file=/src/App.js

Ответ №1:

Я проверил код react, и он работает для меня, может быть, есть что-то базовое, что настроено неправильно. Первое, что нужно попробовать и посмотреть, показывает ли ваш код react простой текст hello world.

Я вижу, что вы используете anima для импорта figma и экспорта кода react. Если вам удастся заставить его работать, это здорово, если нет, я рекомендую попробовать Desech Studio и посмотреть, работает ли это для вас.

Он импортирует Figma с относительным позиционированием html / css и экспортирует код react. Вот репозиторий github для получения более подробной информации.

Ответ №2:

Компонент успеха, который вы импортировали и экспортировали, должен начинаться с заглавной буквы, например Success, тогда только react понимает, что это компонент