Обработка компонентов изображения как свойств в React с помощью styled-components - PullRequest
Новая
       26

Обработка компонентов изображения как свойств в React с помощью styled-components

0 голосов
/ 09 июля 2020

У меня есть проект React, и цель - не иметь файлов. css. В настоящее время я занимаюсь рефакторингом существующего кода. css, чтобы использовать стилизованные компоненты в проекте Typescript React.

Раньше изображения вызывались как фон в классе. css 

a.item.overview {
  background: url(../img/overview.svg) no-repeat 16px 50% / 20px 20px;
  margin-top: 20px;
}

Подход, который я использовал для изображений, заключался в преобразовании файлов .svg в реагирующие компоненты. 

import React from 'react'
import styled from 'styled-components'
import Icon from './Icon'

const Svg = styled(Icon)` 
    margin-top: 20px;
    fill: red;
    height: 20px;
    width: 20px;
    fill-rule:evenodd;
    clip-rule:evenodd;
`

export const OverviewIcon = () => ( 
    <Svg viewBox="0 0 20 20">  
        <path     
            d="X4.2,2.5k11.2c0...."
        />  
    </Svg>
)

Сейчас я пытаюсь создать компонент, который позволит мне передать мой компонент изображения в него как свойство.

В идеале у меня был бы один компонент menuItem, которому я мог бы просто передать компонент изображения и добавить текст. Что-то вроде примера ниже. введите описание изображения здесь

Я относительно новичок в React, поэтому, если мой подход неверен или запутан, я рад внести изменения.

Это тот подход, который я пробовал, но он не сработало 

type Props = {
    image: React.ReactNode
  }

export const LMenuItem = ({image}: Props) => (
    <div>{image}</div>
)

1 Ответ

0 голосов
/ 09 июля 2020

Этот подход, наконец, сработал. 

type Props = {
    children: React.ReactNode
  }

export const LMenuItem = ({children}: Props) => (
    <div>{children}</div>
)
...