Добавление полужирного текста внутри текстовой строки, переданной в качестве реквизита компоненту

У меня есть повторно используемый компонент в React, которому я могу передать несколько очень простых реквизитов:

const Section1 = (props) => (
 <div className = "section">
  <div className = "container is-narrow">
    <div className = "content is-medium"><h2 className = "title is-1 is-bottom-bordered">{props.section1Title}</h2></div>
      <div className = "columns">
        <div className = "column is-half">
          <div className = "content">
              <blockquote>{props.section1Blockquote}</blockquote> 
          </div>
        </div>
        <div className = "column is-half">
          <div className = "content">
            <p>{props.section1Text}</p>
          </div>
        </div>
      </div>
  </div>
</div>

Когда я использую этот компонент, я передаю реквизиты следующим образом:

<Section1
  section1Title = "Example title"
  section1Blockquote = "Example blockquote"
  section1Text = "Example text"
/>

Внутри строк, которые я передаю в качестве реквизита, можно ли стилизовать часть текста, сделав его жирным? Не всю строку, а только ее часть. Как в приведенном выше примере, section1Blockquote, выделить слово «Пример» полужирным шрифтом?

Большое спасибо.

reactjs react-props

18.07.2019 16:37

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

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

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

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

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

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

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

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

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

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

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

2 357

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

Ответы 1

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

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

<Section1
  section1Title = {<React.Fragment>Example <span className = "bold">title</span></React.Fragment>}
  section1Blockquote = "Example blockquote"
  section1Text = "Example text"
/>

в вашем css-файле.

.bold {
  font-weight: bold;
}

или вы можете использовать сильный тег напрямую.

<Section1
  section1Title = {<>Example <strong>title</strong></>}
  section1Blockquote = "Example blockquote"
  section1Text = "Example text"
/>

обновление: вместо того, чтобы оборачивать любой тег html (span), мы можем использовать React.Fragment (сокращение <>), который не будет создавать дополнительный элемент снаружи.

Вместо использования <span> для переноса jsx вы можете использовать сокращенную запись фрагмента реакции <> </>, которая читается немного чище и в некоторых случаях может предотвратить непреднамеренные проблемы с форматированием. reactjs.org/docs/fragments.html#short-syntax

— 18.07.2019 16:48

Большое спасибо! Именно то, что я искал.

— 18.07.2019 16:54

18.07.2019 16:45