Question

我使用相同的jsx渲染服务器端和客户端。我需要一些元素只有html，并且不需要data-reactid。（例如，纯html jsx布局有一些动态变量，但不需要数据重新连接）。

除了我可以重用包含data-reactid的服务器端render dom，并且不需要重新呈现视图。

另一个元素有data-reactid，反应时不需要重新渲染。无法使用shouldComponentUpdate，因为＆＃39; renderToString＆＃39;方法不要调用shouldComponentUpdate。

除非我应该呈现具有不同功能的两个元素（例如renderToStaticMarkup，renderToString）并将其组合，因为该元素可以包含许多元素。当元素更多时，渲染分割和组合可能会导致错误。

这是我的幻想：

在这种情况下，我希望{this.props.children}有数据重新发送但外部html和budy（DefaultLayout）没有。

class DefaultLayout extends  React.Component{   
        if (typeof window !== 'undefined') {
            return (
                <div>{this.props.children}</div>
            );
        } 
        return (
        <html>
            <head>
            </head>
            <body>
                <div id="container" className='container'>
                    <div>{this.props.children}</div>
                </div>
                <script src='/js/index.js'type='text/javascript'></script>
            </body>
        </html>
        );
    }
};
DefaultLayout.noNeedDiffCompoment = true;
export default DefaultLayout;

或新的纯HTML HTML组件

class DefaultLayout extends  React.PureHtmlComponent{    

        if (typeof window !== 'undefined') {
            return (
                <div>{this.props.children}</div>
            );
        }
        return (
        <html>
            <head>
            </head>
            <body>
                <div id="container" className='container'>
                    <div>{this.props.children}</div>
                </div>
                <script src='/js/index.js'type='text/javascript'></script>
            </body>
        </html>
        );
    }
};
export default DefaultLayout;

我可以轻松地使用此布局，而不是客户端和服务器端的错误。

class Somepage extends  React.Component {
    constructor(props) {
        super(props);
    }

    render(){
        return (
            <DefaultLayout>
                <h1>Hello world</h1>
            </DefaultLayout>
        );
    }
};

如果我如上所述，渲染函数可以自动交换渲染函数来渲染元素。

有这样优雅的解决方案吗？

Answer 1

在这种情况下，您应该使用着名的dangerouslySetInnerHTML而不是props.children。

没有其他解决方案。

const DefaultLayout = ({html}) => (
    <html>
        <head>
        </head>
        <body>
            <div id="container" className='container' dangerouslySetInnerHTML={html} />
            <script src='/js/index.js'type='text/javascript'></script>
        </body>
    </html>
);
export default DefaultLayout;

和...

const html = renderToString(<App />);
return renderToStaticMarkup(<DefaultLayout html={html} />);

是否有reactjs有自动切换渲染？（renderToStaticMarkup，renderToString）

1 个答案:

是否有reactjs有自动切换渲染？ （renderToStaticMarkup，renderToString）

1 个答案:

是否有reactjs有自动切换渲染？（renderToStaticMarkup，renderToString）