Я учусь использовать компоненты более высокого порядка. Там я хочу выделить текст. В моем коде я могу выделить всю строку, используя <div>. Проблема в том, что я хочу выделить только часть текста. Итак, я попробовал <span>. Но когда я использую span, вся подсветка не работает. Поскольку это не дает никаких ошибок, я не могу понять, откуда взялась ошибка.
HighlightedText.js
import React, { Component } from 'react';
import UpdatedComponent from './Hoc';
class HighlightedText extends Component {
render() {
return <h1>Highlighted Text</h1>
}
}
export default UpdatedComponent(HighlightedText);
Hoc.js
const UpdatedComponent = OriginalComponent => {
class NewComponent extends React.Component {
render() {
return(props) =>(
<div style={{ background: 'Yellow', padding: 2 }}>
<OriginalComponent {...props}/>
</div>
)
}
}
return NewComponent;
}
export default UpdatedComponent;
2 ответа
Вопросы
- Ваш HOC, похоже, пытается вернуть функциональный компонент из метода рендеринга компонента на основе классов.
- Реквизит раскладывается неправильно.
padding: 2может быть недействительным, он, вероятно, должен предоставить единицу, что вам нужно
Решение
Чтобы исправить выделение, я считаю, вам просто нужно указать правило CSS display: inline-block; для div. Распространение this.props от компонента на основе класса к компоненту в оболочке.
const updatedComponent = (OriginalComponent) => {
class NewComponent extends React.Component {
render() {
return (
<div
style={{
background: "Yellow",
padding: "1rem", // <-- provide unit, 1rem ~ 16px
display: "inline-block" // <-- inline-block display
}}
>
<OriginalComponent {...this.props} />
</div>
);
}
}
return NewComponent;
};
Если вы хотите выделить только часть текста, потребуется изменить виртуальное дерево DOM, возвращаемое исходным компонентом, поскольку вы не можете просто обернуть его, как в вашем примере. Для этого вы можете использовать response-string-replace.