ReactJS — как динамически изменять html-разметку?
Мне нужен повторно используемый компонент с любым типом разметки, определенным внутри во время кодирования, поэтому жесткое кодирование другого компонента было бы очень сложным решением, поэтому обработка разметки с использованием стиля функции была бы просто потрясающей.
Вот моя песочница:https://codesandbox.io/s/determined-clarke-gvrzv?fontsize=14
Я бы динамически изменил свою html-разметку в зависимости от переменной javascript, как показано ниже:
let markup= "li"
function App() {
return (
<div className = "App">
<[markup]>Hello World</[markup]>
</div>
);
}
консоль возвращает меня:
Unexpected token
Как справиться с этой проблемой?
Спасибо за любую подсказку!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ты можешь сделать:
const Markup = "li";
return (
<div className = "app">
<Markup>Hello World</Markup>
</div>
)
Я не знаю точно, что вы пытаетесь сделать, но вы также можете рассмотреть возможность условного рендеринга другого компонента:
const temperature = -20;
return (
temperature < 30 ? <Cold /> : <Warm />
);
или условно поменять встроенную разметку:
const isCold = temp => temp < 30;
const temperature = -12;
return (
isCold(temperature) ? <div>Brrr!</div> : <span>Sunshine!</span>
);
И, наконец, если у вас есть много возможных вариантов, вы можете установить функцию getComponent, чтобы выяснить, что отображать:
const SeasonalComponents = [
{
handles: temp => temp < 0,
component: () => <div>Brrr!</div>
},
{
handles: temp => temp < 30,
component: () => <div>Get your coat!</div>
},
{
handles: temp => temp < 50,
component: () => <div>Just a jacket</div>
},
{
handles: temp => temp < 100,
component: () => <ImportedSummerComponent />
}
];
function getComponent (temperature) {
const seasonal = SeasonalComponents.find(x => x.handles(temperature);
return seasonal ? seasonal.component : <span>Unseasonable weather!</span>;
}
который позволяет вашему методу рендеринга выполнять поиск:
const Component = getComponent(this.props.temp);
return (
<Component />
);
круто, отлично работает, мне нужен многоразовый компонент с любым типом разметки, выбранным внутри во время кодирования, поэтому жесткое кодирование другого компонента было бы очень сложным решением :/, тем не менее, разметка шапки работает просто отлично :)!
просто не забудьте использовать верхний регистр для первого символа имени переменной
Я добавил пример шаблона поиска компонентов для случаев, когда есть много возможностей.
Вы можете использовать реакцию без синтаксиса jsx. reactjs.org/docs/реакт-без-jsx.html