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

これはおそらくそれを行う1つの方法です

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 に答える