Question

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

这是我的组件的代码：

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方法？

Answer 1

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

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

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

e.g。

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

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

react router redux
redux-async-connect
serialize-javascript - 你可以使用这个没有redux

服务器端呈现通过Ajax加载状态的React组件

1 个答案: