Question

只是想知道这是否可能。

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

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>

      )

   } 

});

我想做的是＆＃39;传递＆＃39;使用props的父组件的子组件。

这样的事情：

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


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

通常情况下，父组件会有＆＃34;硬编码＆＃34;提到它的孩子。 但我正在寻找的是一个父React组件的模式，能够＆＃34;根据需要采用＆＃34; 不同的孩子。

这可能吗？

执行此操作的正确方法可能是：

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


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

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

Answer 1

这是在React中构建的

var Parent = React.createClass({

   render: function(){

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

})

用法：

 ReactDOMServer.renderToString(<Parent><Children /><Parent>)

Answer 2

这可能是一种方法

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>

            )

        }

    });
};

使用React进行服务器端渲染 - 可组合性=＆gt;将子组件传递给父组件

2 个答案: