3

我正在努力使我的组件在客户端和服务器端都工作。

这是我的组件的代码：

export default class extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            title: props.params.title,
            message: props.params.message
        };
    }

    componentDidMount() {
        $.ajax({
            url: "/get-message",
            success: function (result) {
                this.setState({
                    title: result.title,
                    message: result.message
                });
            }.bind(this),
            cache: false
        });
    }

    render() {
        return (
            <div>
                <h2>{this.state.title}</h2>
                <h3>{this.state.message}</h3>
            </div>
        );
    }
}

它工作正常。当它通过客户端呈现时，它同时显示为h2空h3，然后在 ajax 调用返回时填充它们。

当它通过服务器呈现时，我已经填充了这些道具，并且发送到客户端的 html 已经完成，不需要任何额外的东西。

问题是，当它在服务器上呈现时，我在客户端收到错误消息：

Warning: React attempted to reuse markup in a container but the checksum was invalid. [...]

然后它再次调用 ajax 方法并重新渲染所有内容。

那么我应该如何处理这种情况呢？有没有办法告诉 React 这个组件是在服务器上呈现的，接受它而不调用该componentDidMount方法？

4

1 回答 1

3

处理此问题的常用方法是使用全局状态。<body>您可以在标签底部序列化一个 JS 对象，其中包含在服务器端计算的状态。

<script>globalState={MyFeature: {title: 'foo'}};</script>

然后使用该状态（或其分支）作为组件的默认值。

例如

if (globalState.MyFeature.title) {
    this.setState({ title: globalState.MyFeature.title });
} else {
    $.ajax(/* ... */);
}

显然，您可以使用 Redux 很好地管理您的全局状态，但您并不需要这样做。但是，有许多有用的软件包可以帮助您简化此过程。

于 2016-06-15T10:56:54.770 回答