Динамическая загрузка компонента с использованием ReactJS?

Question

Вот мой сценарий. Я создаю одностраничное приложение с компонентом body, содержащим компонент боковой панели (все написано в JSX).

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

return (
    <div> 
    <SideBar onComponentChange={this.handleComponentChange}/> 
    <div id="content-container"> 
     <LoadingContainer ref="loading_container"/> 
    </div> 
    </div> 
); 

Когда пользователь нажимает на элемент в боковой панели, это вызовет метод handleComponentChange в классе компонента тела, который будет «смотреть вверх «какой компонент загружается в тело, а затем визуализируйте его. У меня есть тег, в который я хотел бы поместить компонент. Любые идеи о том, как добавить новый компонент в рендеринг?

Answer 1

Тег, в который вы хотите поместить новый компонент, должен быть компонентом. Что-то вроде «ContentContainer», названное более подходящим для того, что вы вкладываете в него.

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

Теперь, когда вы нажимаете на что-то на боковой панели (которая должна быть дочерним компонентом вашего тела), она обновляет состояние в теле с вашими новыми данными. Эти новые данные будут переданы в ваш ContentContainer через реквизиты, автоматически реагируя, и ваш компонент изменится.

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

Пример кода:

var SideBar = React.createClass({ 
    handleClick: function (e) { 
     this.props.handleClick("Dave"); 
    }, 
    render: function() { 
     return <button id='sideButton' onClick = {this.handleClick}> Click me to change Bob to dave< /button>; 
    } 
}); 

var ComponentContainer = React.createClass({ 
    render: function() { 
     return <div >{this.props.name}</div>; 
    } 
}); 

var BodyComponent = React.createClass({ 
    handleClick: function(newData) { 
     this.setState({data: newData}); 
    }, 
    getInitialState: function() { 
     return {data: this.props.data}; 
    }, 
    render: function() { 
     return <div><ComponentContainer name={this.state.data}/><SideBar handleClick={this.handleClick}/></div>; 
    } 
}); 



var originalName = {originalName: "bob"}; 

React.render(<BodyComponent data={originalName}/>, document.getElementById('content')); 

Если вы хотите добавить «Dave» рядом с «Bob» вместо того, чтобы заменить его, вы могли бы ComponentContainer вынести список вместо одного DIV, или BodyComponent отрендерить список компонентов ComponentContainers. В любом случае, вы просто сохраните список имен в своем состоянии BodyComponent.