Невозможно передать изображение в качестве реквизита с помощью {}. Необходимо использовать <>

Гэтсби 2.4.11

У меня есть компонент, который воплощает раздел на моем сайте (источник внизу). Я включаю компонент Section на страницы,

import SomeIcon from '../images/icons/something.svg'

const SomePage = () => (
  <Section title = "Lorum Ipsum" icon=<SomeIcon/>>
    <p>Lorum ipsum dolor sit amet</p>
  </Section>
)

Это работает и отображает страницу правильно. Однако этот синтаксис icon=<SomeIcon/> глубоко оскорбляет меня до глубины души. Кроме того, это отключает проверку синтаксиса и синтаксическую окраску моего текстового редактора. Я хочу переключить его на {}

<Section title = "Lorum Ipsum" icon = {SomeIcon}>

Однако с таким синтаксисом значок не отображается. Это просто пусто. Как передать изображение как свойство с закорючками {}?

Section.js

import React from 'react'
import PropTypes from 'prop-types'

const Section = ({ children, icon, title, background, fullWidth }) => (
  <section style = {{background:background}}>
    <div class = "wrap">
      <h2>{title}</h2>
      <span class = "icon">{icon}</span>
      <div class = "content">
        {children}
      </div>
    </div>
  </section>
)

Section.propTypes = {
  title: PropTypes.string,
  icon: PropTypes.string,
  background: PropTypes.string,
  fullWidth: PropTypes.boolean,
}

Section.defaultProps = {
  title: ``,
  icon: ``,
  background: ``,
  fullWidth: false,
}

export default Section

Каков результат console.info(SomeIcon)? Насколько я знаю, когда вы импортируете файл SVG, он возвращает только свой путь...

— 26.02.2019 18:34

Разве это не должно быть как минимум icon = {<SomeIcon/>}?

— 26.02.2019 18:40

@ user3210641 ƒ SomeIcon (props) { return React.createElement(... @bitsapien объяснил это в своем ответе. Мне нужно вызвать функцию.

— 26.02.2019 18:52

reactjs gatsby

26.02.2019 18:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это довольно аккуратный рефакторинг. Вы, вероятно, должны попробовать сделать это вместо того, чтобы заставить его работать. Это связано с тем, что когда вы передаете компонент в качестве реквизита, он не создается. Он должен быть создан внутри.

Section.js

import React from 'react'
import PropTypes from 'prop-types'

const Section = ({ children, icon, title, background, fullWidth }) => (
  <section style = {{background:background}}>
    <div class = "wrap">
      <h2>{title}</h2>
      <span class = "icon">{icon()}</span>  {/* Notice this line */}
      <div class = "content">
        {children}
      </div>
    </div>
  </section>
)

Section.propTypes = {
  title: PropTypes.string,
  icon: PropTypes.func,                  // Notice this line
  background: PropTypes.string,
  fullWidth: PropTypes.boolean,
}

Section.defaultProps = {
  title: ``,
  icon: ``,
  background: ``,
  fullWidth: false,
}

export default Section

26.02.2019 18:42