Question

我有简单的嵌套React组件。我在HelloWorld内嵌套Button。但是我想在一个特定的div（即'hello'id）上挂载HelloWorld。有可能吗？

的index.html

<body>
    <div id="hello"></div>
    <div id="btn"></div>
 </body>

JSX

var HelloWorld = React.createClass({
    render: function(){
        return (
            <b>Hello World!</b>
        )
    }
});

var options={
    txt: "I'm Getting there!",
    counter: 10
}

var Button = React.createClass({

    handleClick: function(){
        alert('you clicked');
    },

    render: function(){
        return  <div>
                    <button onClick={this.handleClick}>{this.props.options.txt}</button>
                    <i>{this.props.options.counter}</i>
                    <HelloWorld/> //can I mount this on hello?
                </div>
    }
});


ReactDOM.render(<Button options={options}/>, document.getElementById("btn"));

Answer 1

是的，您可以，但不能直接在您的代码中：您无法在根反应容器之外安装反应组件。

选项1 （这或多或少是标准做法）
创建1个反应容器并将所有内容安装在那里：

的index.html：

<body>
    <div id="myApp"></div>
</body>

App.js：

var MyApp = React.createClass({
    render: function(){
        return (
            <div>
              <HelloWorld />
              <Button options={this.props.options} />
            </div>
        )
    }
});

// other code unchanged..

ReactDOM.render(<MyApp options={options}/>, document.getElementById("myApp"));

选项2（不推荐） 或者，您可以创建2个完全独立的反应容器。请注意，这些反应容器无法以反应框架语言相互通信。

（index.html不变）。

app.js

// (other code unchanged) ...
ReactDOM.render(<HelloWorld />, document.getElementById("hello"));
ReactDOM.render(<Button options={options}/>, document.getElementById("btn"));

PS：我在示例代码中遗漏了选项var，专注于您的问题。

如何在特定节点上安装嵌套的react组件？

1 个答案: