Вызов динамического компонента в реакторе JS

Question

Я новичок в реакции JS. Я вызываю компонент реакции из строки HTML, которая исходит из другого класса javascript. Но компонент не отображается на экране.

class Form extends Component { 
    render() { 
     var markup = '<Sections />'; 
     return (<div className="content" dangerouslySetInnerHTML={{__html: markup}}></div>); 
    } 

} 

class Sections extends Component{ 
    render(){ 
     return (<div className='row'>Row1</div>); 
    } 
} 

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

Answer 1

Помните, что JSX отличается от HTML. Когда вы пишете что-то вроде <Sections />, вы на самом деле пишете React.createElement(Sections, null).

Если у вас есть "<Sections />" в качестве строки, и вы хотите разрешить ее на вызов React.createElement, тогда вам нужно проанализировать ее как JSX. Однако это происходит во время компиляции (а не во время выполнения), что помешает вам использовать динамические компоненты.

Если вы хотите работать с динамическим компонентом, то ваш метод построения должен вернуть класс компонента или экземпляр компонента.

function getDynamicComponent() { 
    return Sections; 
} 
function render() { 
    const Component = getDynamicComponent(); 
    return <Component />; 
} 

// or 

function getDynamicComponentInstance() { 
    return <Sections />; 
} 
function render() { 
    const component = getDynamicComponentInstance(); 
    return component; 
} 

Единственный способ вывести правильный компонент из "<Sections />" должен разобрать его вручную и использовать eval разрешить имя соответствующей переменной. Разбор JSX является нетривиальным, и использование eval, скорее всего, откроет вам целый класс уязвимостей безопасности.

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