Javascript React.js如何避免服务器渲染某些组件?

Javascript React.js如何避免服务器渲染某些组件?,javascript,reactjs,isomorphic-javascript,Javascript,Reactjs,Isomorphic Javascript,我只想在服务器上渲染React用于SEO目的,而一些组件不需要在服务器上渲染。在这种情况下,如何忽略某些组件的服务器渲染?我建议使用中的参数来控制渲染的高阶组件。这将允许您包装应该只在客户端上呈现的组件,而HoC可以决定要么呈现包装的组件,要么不呈现(如果在服务器上) var React = require('react'); var ReactDOMServer = require('react-dom/server'); // Should be added as a static con

我只想在服务器上渲染React用于SEO目的,而一些组件不需要在服务器上渲染。在这种情况下,如何忽略某些组件的服务器渲染?

我建议使用中的参数来控制渲染的高阶组件。这将允许您包装应该只在客户端上呈现的组件,而HoC可以决定要么呈现包装的组件,要么不呈现(如果在服务器上)

var React = require('react');
var ReactDOMServer = require('react-dom/server');

// Should be added as a static contextTypes property on any component
// needing access to the parameter. In this case, it's only the HoC
var serverContextTypes = {
    isServer: React.PropTypes.bool
};

// Should be the root component of your server-side render to inject
// the parameter into context
var ServerContext = React.createClass({
    getChildContext: function () {
        return {
            isServer: true
        };
    },

    render: function () {
        // Only allows a single child
        return React.Children.only(this.props.children);
    }
});

// Tells React which context types to pass to ServerContext's children
ServerContext.childContextTypes = serverContextTypes;

ServerContext.propTypes = {
    children: React.PropTypes.element.isRequired
};

// The HoC that determines if the wrapped component should be rendered
var ClientOnly = function (Wrapped) {
    var Component = React.createClass({
        render: function () {
            if (this.context.isServer) {
                return null;
            } else {
                return React.createElement(Wrapped, this.props);
            }
        }
    });

    Component.contextTypes = serverContextTypes;

    return Component;
};

// Example React.Component that will always render
var Content = React.createClass({
    render: function () {
        return React.createElement('main', null, 'Important content that should always render');
    }
});

// Example React.Component that will be omitted from server-side rendering
var Extra = ClientOnly(React.createClass({
    render: function () {
        return React.createElement('aside', null, 'Content to exclude in a React.Component');
    }
}));

// Example SFC that will be omitted from server-side rendering
var ExtraSFC = ClientOnly(function () {
    return React.createElement('aside', null, 'Content to exclude in a Stateless Functional Component');
});

// The App!
var App = React.createClass({
    render: function () {
        return React.createElement('div', {className: 'app'}, [
            React.createElement(Extra),
            React.createElement(Content),
            React.createElement(ExtraSFC)
        ]);
    }
});

var element = React.createElement(ServerContext, null, 
    React.createElement(App)
);

console.log(ReactDOMServer.renderToString(element));