React'e dinamik olarak alt bileşenleri ekleyin

Question 1

Amacım, bileşenleri bir sayfaya / üst bileşene dinamik olarak eklemektir.

Bunun gibi bazı temel örnek şablonlarla başladım:

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

Burada SampleComponent, şablonda <div id="myId"></div>önceden yazılmış olan düğüme monte edilir App.js. Peki ya Uygulama bileşenine sınırsız sayıda bileşen eklemem gerekirse? Açıkçası, gerekli tüm div'lere orada oturamam .

Bazı öğreticileri okuduktan sonra, bileşenlerin nasıl oluşturulduğu ve dinamik olarak ana bileşene eklendiğini hala anlamıyorum. Bunu yapmanın bir yolu nedir?

Question 2

Bileşenlerinizi şu şekilde çocukken geçirmeniz gerekir:

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(
    <App>
        <SampleComponent name="SomeName"/> 
    <App>, 
    document.body
);

Ve sonra bunları bileşenin gövdesine ekleyin:

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                {
                    this.props.children
                }
            </div>
        );
    }
});

HTML kodunu manuel olarak değiştirmenize gerek yok, React bunu sizin için yapacaktır. Bazı alt bileşenler eklemek istiyorsanız, yalnızca sahne donanımını değiştirmeniz veya bağlı olduğunu belirtmeniz gerekir. Örneğin:

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

Öncelikle document.body kullanmazdım . Bunun yerine boş bir kap ekleyin:

index.html:

<html>
    <head></head>
    <body>
        <div id="app"></div>
    </body>
</html>

Ardından, yalnızca öğenizi oluşturmayı seçin <App />:

main.js:

var App = require('./App.js');
ReactDOM.render(<App />, document.getElementById('app'));

İçinden App.jsdiğer bileşenlerinizi içe aktarabilir ve DOM oluşturma kodunuzu tamamen yok sayabilirsiniz:

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

Ardından, kullanarak istediğiniz sayıda bileşenle gerekli bileşen dosyalarına aktararak programlı olarak etkileşime girebilirsiniz require.

Question 4

Çözümümü burada Chris'in cevabına göre paylaşıyorum. Umarım başkalarına yardım edebilir.

Alt öğeleri dinamik olarak JSX'ime eklemem gerekiyordu, ancak dönüş ifademdeki koşullu kontrollerden daha basit bir şekilde. Alt öğelerin henüz hazır olmaması durumunda bir yükleyici göstermek istiyorum. İşte burada:

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

Şimdi, ben de sadece koyabilirsiniz farkında mısın {pushMessages}ve {emailMessages}benim, doğrudan return()aşağıda, ama daha da koşullu içeriğe sahip varsayarak benim return()sadece darmadağın olur diye düşünüyoruz.

Question 5

Öncelikle bir uyarı: React tarafından yönetilen DOM ile asla uğraşmamalısınız, bunu arayarak yaptığınız ReactDOM.render(<SampleComponent ... />);

React ile, SampleComponent'i doğrudan ana Uygulamada kullanmalısınız.

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);

Bileşeninizin içeriği alakasızdır, ancak şu şekilde kullanılmalıdır:

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <SampleComponent name="SomeName"/>
            </div>
        );
    }
});

Daha sonra bir liste kullanmak için uygulama bileşeninizi genişletebilirsiniz.

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 belgelerine bakmanızı ve ardından "Başlarken" talimatlarını izlemenizi gerçekten tavsiye ederim. Bunun için harcadığınız zaman daha sonra karşılığını verecektir.

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