在React中动态添加子组件

问题描述 投票：0回答：5

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

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

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
模板中的。但是如果我需要向App组件添加不定数量的组件怎么办？显然我无法将所有必需的 divs 坐在那里。

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

javascript reactjs babeljs
5个回答
91
投票

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

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 会为你做这件事。如果你想添加一些子组件，你只需要更改 props 或声明它取决于。例如：

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

});
9
投票

根据克里斯的回答，在这里分享我的解决方案。希望它可以帮助其他人。

我需要动态地将子元素附加到我的 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>
    )
}

现在，我确实意识到我也可以将 

{pushMessages}
和 
{emailMessages}
直接放在下面的 
return()
中，但假设我有更多条件内容，我的 
return()
就会看起来很混乱。

8
投票

首先，我不会使用 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
将任意数量的组件导入到必要的组件文件中，以编程方式与它们进行交互。

6
投票

首先警告：你永远不应该修改由 React 管理的 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

0
投票

自 React 18 起，您必须使用 

createRoot
和 
hydrateRoot
方法。

对于客户端渲染：

import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container); //createRoot(container!) if you use TypeScript
root.render(<MyComponent />);

对于服务器端渲染：

import { hydrateRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = hydrateRoot(container, <MyComponent />);

仅供参考：检查反应指南

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.