Fatal编程技术网
  • javascript/
  • Javascript 在React中动态添加子组件

Javascript 在React中动态添加子组件

javascript reactjs

Javascript 在React中动态添加子组件,javascript,reactjs,babeljs,Javascript,Reactjs,Babeljs,我的目标是在页面/父组件上动态添加组件 我从一些基本的示例模板开始，如下所示： var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render( <App> <SampleComponent name="SomeName"/> <App>, document.body ); v

我的目标是在页面/父组件上动态添加组件

我从一些基本的示例模板开始，如下所示：

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>
                <SampleComponent name="SomeName"/>
            </div>
        );
    }
});
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'));

var-App=require（'./App.js'）；
var-SampleComponent=require（'./SampleComponent.js'）；
render（，document.body）；
ReactDOM.render（，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>

        );
    }

});

var-App=React.createClass({
render:function（）{
返回(
应用程序主组件！
myId分区
);
}
});
SampleComponent.js：

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

var SampleComponent=React.createClass({
render:function（）{
返回(
样品组件！
);
}
});
这里，
SampleComponent
安装到
节点，该节点是在
App.js
模板中预先编写的。但如果我需要向应用程序组件添加数量不定的组件，该怎么办？显然，我不能让所有必要的演员都坐在那里

在阅读了一些教程之后，我仍然不了解如何创建组件并将其动态添加到父组件。这样做的方法是什么？

您需要将组件作为子级传递，如下所示：

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>
                <SampleComponent name="SomeName"/>
            </div>
        );
    }
});

var-App=require（'./App.js'）；
var-SampleComponent=require（'./SampleComponent.js'）；
ReactDOM.render(
, 
文件正文
);
然后将它们附加到组件的主体中：

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

var-App=React.createClass({
render:function（）{
返回(
应用程序主组件！
{
这是道具
}
);
}
});
您不需要手动操作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>
        );
    }

});

var-App=React.createClass({
getInitialState:函数（）{
返回[
{id:1，name:“Some name”}
]
},
addChild:function（）{
//状态更改将导致组件重新渲染
this.setState（this.state.concat([
{id:2，名称：“另一个名称”}
]))
}
render:function（）{
返回(
应用程序主组件！
添加组件
{
this.state.map（（项）=>(
))
}
);
}
});
首先。而是添加一个空容器：

index.html:

<html>
    <head></head>
    <body>
        <div id="app"></div>
    </body>
</html>
在
App.js
中，您可以导入其他组件并完全忽略DOM渲染代码：

App.js:

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

var SampleComponent = require('./SampleComponent.js');

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

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component!</h1>
            </div>
        );
    }
});
然后，您可以通过使用
require

将任意数量的组件导入必要的组件文件，以编程方式与这些组件进行交互。首先，一个警告是：您不应该修补由React管理的DOM，这是通过调用
ReactDOM.render（）来完成的

使用React，您应该直接在主应用程序中使用SampleComponent


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



var-App=require（'./App.js'）；
var-SampleComponent=require（'./SampleComponent.js'）；

ReactDOM.render（
根据Chris的回答，在这里分享我的解决方案。希望它能帮助其他人

我需要动态地将子元素追加到JSX中，但这比我的return语句中的条件检查更简单。我想在子元素尚未就绪的情况下显示一个加载程序。如下所示：


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



导出类设置扩展React.PureComponent{
render（）{
常量加载=（我正在加载）；
让内容=[]；
让pushMessages=null；
让emailMessages=null；
if（this.props.pushPreferences）{
pushMessages=（在此处推送内容）；
}
if（this.props.emailPreferences）{
emailMessages=（此处为电子邮件内容）；
}
//按我想要的顺序推动部件
if（emailMessages）content.push（emailMessages）；
if（pushMessages）content.push（pushMessages）；
返回(
{content.length？内容：正在加载}
)
}



现在，我意识到我也可以直接把
{pushMessages}
和
{emailMessages}
放在下面的
return（）
中，但假设我有更多的条件内容，我的
return（）
会看起来很杂乱。
你的两个组件装载到不同的元素有什么原因吗？99%的React应用程序只调用
ReactDOM。render
一次，而所有其他组件都是“根”节点的子节点否，我现在明白这是不正确的方式：）没问题，我可以看到有人复制粘贴它，然后在上面花费数小时…谢谢！我忽略了一个事实，即可以在render（）中根据组件的状态定义组件。您的答案是最完整的（提到用组件填充状态）并准确地回答了这个问题：）你如何将道具传递给已附加的子项？因此，接下来要做的是：如果我想制作一个具有多个选项卡和按钮弹出窗口的单页应用程序，我需要继续渲染这些组件（空），隐藏它们（以某种方式），然后修改状态使它们“出现”在正确的时间？如果你试图在React中制作一个多选项卡单页应用程序，这是最好的方法吗？还是我遗漏了什么？谢谢你！@Elisabeth是的，没错。你实际上有两个主要选择：要么总是使用CSS呈现所有内容并隐藏内容，有条件地应用CSS类或内联样式；或者根据应用程序状态，有条件地返回React元素或null。这两种方法各有利弊，通常在同一个应用程序中根据您的需要针对不同的组件使用。谢谢Nikolai！这确实有助于巩固我对React的看法。这是一种非常不同的设计应用程序和思考问题的方法我使用的DOM比普通JavaSc使用的要多