React에서 하위 구성 요소 동적 추가
목표는 페이지/부모 컴포넌트에 동적으로 컴포넌트를 추가하는 것입니다.
처음에는 다음과 같은 기본적인 샘플템플릿을 사용했습니다.
main.filename:
var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId'));
App.js:
var App = React.createClass({
render: function() {
return (
<div>
<h1>App main component! </h1>
<div id="myId">myId div</div>
</div>
);
}
});
Sample Component.js:
var SampleComponent = React.createClass({
render: function() {
return (
<div>
<h1>Sample Component! </h1>
</div>
);
}
});
여기서SampleComponent에 탑재되어 있다.<div id="myId"></div>node, 이것은 사전에 기술되어 있습니다.App.js템플릿입니다.하지만 App 컴포넌트에 무기한의 컴포넌트를 추가해야 할 경우에는 어떻게 해야 합니까?물론 필요한 모든 디바들을 그곳에 앉힐 수는 없습니다.
일부 튜토리얼을 읽어도 컴포넌트가 생성되어 부모 컴포넌트에 동적으로 추가되는 방법을 아직 이해하지 못했습니다.어떻게 하면 좋을까요?
다음과 같이 컴포넌트를 아이로 전달해야 합니다.
var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(
<App>
<SampleComponent name="SomeName"/>
<App>,
document.body
);
그런 다음 컴포넌트 본체에 장착합니다.
var App = React.createClass({
render: function() {
return (
<div>
<h1>App main component! </h1>
{
this.props.children
}
</div>
);
}
});
HTML 코드를 수동으로 조작할 필요가 없습니다.리액트가 대신 조작합니다.일부 하위 구성요소를 추가하려면 소품이나 상태에 따라 변경하기만 하면 됩니다.예를 들어 다음과 같습니다.
var App = React.createClass({
getInitialState: function(){
return [
{id:1,name:"Some Name"}
]
},
addChild: function() {
// State change will cause component re-render
this.setState(this.state.concat([
{id:2,name:"Another Name"}
]))
}
render: function() {
return (
<div>
<h1>App main component! </h1>
<button onClick={this.addChild}>Add component</button>
{
this.state.map((item) => (
<SampleComponent key={item.id} name={item.name}/>
))
}
</div>
);
}
});
Chris의 답변을 바탕으로 솔루션을 공유합니다.다른 사람들에게 도움이 되길 바랍니다.
자녀 요소를 JSX에 동적으로 추가해야 했지만 반환문의 조건부 검사보다 간단한 방법으로 추가해야 했습니다.하위 요소가 아직 준비되지 않은 경우 로더를 보여 줍니다.여기 있습니다.
export class Settings extends React.PureComponent {
render() {
const loading = (<div>I'm Loading</div>);
let content = [];
let pushMessages = null;
let emailMessages = null;
if (this.props.pushPreferences) {
pushMessages = (<div>Push Content Here</div>);
}
if (this.props.emailPreferences) {
emailMessages = (<div>Email Content Here</div>);
}
// Push the components in the order I want
if (emailMessages) content.push(emailMessages);
if (pushMessages) content.push(pushMessages);
return (
<div>
{content.length ? content : loading}
</div>
)
}
자, 이제 깨달았어요. 제가 이 모든 것들을{pushMessages}그리고.{emailMessages}직접 내 안에return()하지만 더 많은 조건부 내용이 있다고 가정하면return()어수선해 보일 거야
첫째, document.body를 사용하지 않습니다.대신 빈 컨테이너를 추가합니다.
index.html:
<html>
<head></head>
<body>
<div id="app"></div>
</body>
</html>
그런 다음 다음 다음 항목만 렌더링하도록 선택합니다.<App />요소:
main.js:
var App = require('./App.js');
ReactDOM.render(<App />, document.getElementById('app'));
이내에App.js다른 구성요소를 가져오고 DOM 렌더 코드를 완전히 무시할 수 있습니다.
App.js:
var SampleComponent = require('./SampleComponent.js');
var App = React.createClass({
render: function() {
return (
<div>
<h1>App main component!</h1>
<SampleComponent name="SomeName" />
</div>
);
}
});
SampleComponent.js:
var SampleComponent = React.createClass({
render: function() {
return (
<div>
<h1>Sample Component!</h1>
</div>
);
}
});
그런 다음 컴포넌트를 필요한 컴포넌트 파일로 Import하여 임의의 수의 컴포넌트와 프로그래밍 방식으로 상호 작용할 수 있습니다.require.
첫 번째 경고: React에 의해 관리되는 DOM은 절대 조작하지 마십시오.이 DOM은 전화로 관리됩니다.ReactDOM.render(<SampleComponent ... />);
React에서는 SampleComponent를 메인 앱에서 직접 사용해야 합니다.
var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
구성 요소의 내용은 관련이 없지만 다음과 같이 사용해야 합니다.
var App = React.createClass({
render: function() {
return (
<div>
<h1>App main component! </h1>
<SampleComponent name="SomeName"/>
</div>
);
}
});
그런 다음 앱 구성 요소를 확장하여 목록을 사용할 수 있습니다.
var App = React.createClass({
render: function() {
var componentList = [
<SampleComponent name="SomeName1"/>,
<SampleComponent name="SomeName2"/>
]; // Change this to get the list from props or state
return (
<div>
<h1>App main component! </h1>
{componentList}
</div>
);
}
});
React 문서를 보고 "시작" 지침을 따르는 것이 좋습니다.당신이 그것에 쓴 시간은 나중에 결실을 맺을 것이다.
https://facebook.github.io/react/index.html
언급URL : https://stackoverflow.com/questions/36651583/dynamically-add-child-components-in-react
'programing' 카테고리의 다른 글
| MongoDB의 인덱스 목록? (0) | 2023.03.17 |
|---|---|
| angularjs의 텍스트 영역 값을 가져올 수 없습니다. (0) | 2023.03.17 |
| Angularjs $http 및 진행률 바 (0) | 2023.03.17 |
| JSON 모듈을 사용하여 예쁘게 인쇄할 때 사용자 지정 들여쓰기를 구현하는 방법은 무엇입니까? (0) | 2023.03.17 |
| jQuery AJAX 오류 처리(HTTP 상태 코드) (0) | 2023.03.17 |