1

只是想知道这是否可能。

我有一个像这样的父组件：

const React = require('react');    

module.exports = React.createClass({

   render: function(){

      return (

          <html lang="en">
          <head>
              <meta charset="UTF-8"></meta>
                  <title>Title</title>
          </head>
          <body>

              {this.props.child}

          </body>
          </html>

      )

   } 

});

我想做的是使用道具将子组件“传递”给父组件。

像这样的东西：

const child = React.createClass({
   //// etc
});


ReactDOMServer.renderToString(<HTMLParent child={child}/>);

通常，父组件将具有对其子组件的“硬编码”引用。但我正在寻找的是一种父 React 组件能够根据需要“采用”不同子组件的模式。

这可能吗？

也许正确的方法是这样的：

    const child = React.createClass({
       //// etc
    });


    const str = ReactDOMServer.renderToString(<child />);

    ReactDOMServer.renderToString(<HTMLParent child={str}/>);
4

2 回答 2

3

这是内置在 React 中的

var Parent = React.createClass({

   render: function(){

      return (
        <div>{ this.props.children }</div>
      )
   } 

})

用法：

 ReactDOMServer.renderToString(<Parent><Children /><Parent>)
于 2016-03-30T22:13:07.427 回答
0

这也许是一种方法

const React = require('react');


module.exports = function (children) {

    return React.createClass({

        renderChildren: function () {

            return children.map(function (item) {

                var Comp = item.comp;
                var props = item.props;

                return (
                    <div>
                        <Comp {...props}/>
                    </div>
                )
            });

        },

        render: function () {

            return (

                <html lang="en">
                <head>
                    <meta charset="UTF-8"></meta>
                    <title>Title</title>
                </head>
                <body>

                <div>
                    {this.renderChildren()}
                </div>

                </body>
                </html>

            )

        }

    });
};
于 2016-03-30T22:25:44.680 回答