เพิ่มส่วนประกอบย่อยแบบไดนามิกใน React

Question 1

เป้าหมายของฉันคือการเพิ่มส่วนประกอบแบบไดนามิกในเพจ / คอมโพเนนต์หลัก

ฉันเริ่มต้นด้วยเทมเพลตตัวอย่างพื้นฐานเช่นนี้:

main.js:

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>

        );
    }

});

SampleComponent.js:

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component! </h1>
            </div>
        );
    }
});

ที่นี่SampleComponentติดตั้งกับ<div id="myId"></div>โหนดซึ่งเขียนไว้ล่วงหน้าในApp.jsเทมเพลต แต่จะเกิดอะไรขึ้นถ้าฉันต้องการเพิ่มองค์ประกอบไม่ จำกัด จำนวนลงในองค์ประกอบของแอป? เห็นได้ชัดว่าฉันไม่สามารถมีdiv ที่จำเป็นทั้งหมดนั่งอยู่ที่นั่นได้

หลังจากอ่านบทแนะนำบางส่วนแล้วฉันยังไม่เข้าใจว่าส่วนประกอบต่างๆถูกสร้างและเพิ่มไปยังองค์ประกอบหลักแบบไดนามิกได้อย่างไร วิธีการทำคืออะไร?

Question 2

คุณต้องส่งส่วนประกอบของคุณในฐานะลูกเช่นนี้:

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 ด้วยตนเอง React จะทำเพื่อคุณ หากคุณต้องการเพิ่มส่วนประกอบย่อยคุณเพียงแค่เปลี่ยนอุปกรณ์ประกอบฉากหรือระบุว่าขึ้นอยู่กับ ตัวอย่างเช่น:

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>
        );
    }

});

Question 3

ครั้งแรกที่ฉันจะไม่ใช้ 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>
        );
    }
});

จากนั้นคุณสามารถโต้ตอบทางโปรแกรมกับคอมโพเนนต์จำนวนเท่าใดก็ได้โดยนำเข้าในไฟล์คอมโพเนนต์ที่จำเป็นโดยใช้require.

Question 4

แบ่งปันวิธีแก้ปัญหาของฉันที่นี่ตามคำตอบของคริส หวังว่ามันจะช่วยคนอื่นได้

ฉันต้องการต่อท้ายองค์ประกอบลูกแบบไดนามิกใน 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()ก็จะดูรก

Question 5

ประการแรกคำเตือน: คุณไม่ควรคนจรจัดกับ DOM ที่จัดการโดย React ซึ่งคุณกำลังทำโดยการโทร 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>
        );
    }
});

ฉันอยากจะแนะนำให้คุณดูเอกสารการตอบสนองจากนั้นทำตามคำแนะนำ "เริ่มต้นใช้งาน" เวลาที่คุณใช้ไปนั้นจะจ่ายออกในภายหลัง

https://facebook.github.io/react/index.html