由于React没有任何内置的方式来管理document.title
,我以前在路由处理程序的componentDidMount
内设置它。
但是现在我需要根据异步获取的state
修改标题。我开始对componentDidUpdate
进行分配,但我偶尔会忘记将document.title
分配到某些页面中,之前的标题会一直存在,直到我最终注意到它为止。
理想情况下,我想要一种以声明方式表达document.title
的方法,而不必分配它。鉴于我希望能够在几个嵌套级别指定文档标题,某种“假”组件可能是最方便的:
其他要求:
我能用什么?
答案 0 :(得分:52)
我为此写了react-document-title。
它提供了一种在单页应用中指定document.title
的声明方式
如果要在将组件呈现为字符串后在服务器上获取标题,请调用DocumentTitle.rewind()
。
<noscript>
; props
和state
; 假设您使用react-router之类的内容:
var App = React.createClass({
render: function () {
// Use "My Web App" if no child overrides this
return (
<DocumentTitle title='My Web App'>
<this.props.activeRouteHandler />
</DocumentTitle>
);
}
});
var HomePage = React.createClass({
render: function () {
// Use "Home" while this component is mounted
return (
<DocumentTitle title='Home'>
<h1>Home, sweet home.</h1>
</DocumentTitle>
);
}
});
var NewArticlePage = React.createClass({
mixins: [LinkStateMixin],
render: function () {
// Update using value from state while this component is mounted
return (
<DocumentTitle title={this.state.title || 'Untitled'}>
<div>
<h1>New Article</h1>
<input valueLink={this.linkState('title')} />
</div>
</DocumentTitle>
);
}
});
我会跟踪已挂载的实例,并且只有在更新,挂载或卸载时,才会在挂载的实例堆栈中使用title
给予顶部DocumentTitle
。在服务器上,componentWillMount
触发,但我们不会获得didMount
或willUnmount
,因此我们引入DocumentTitle.rewind()
,它返回一个字符串并销毁状态以准备下一个请求。
var DocumentTitle = React.createClass({
propTypes: {
title: PropTypes.string
},
statics: {
mountedInstances: [],
rewind: function () {
var activeInstance = DocumentTitle.getActiveInstance();
DocumentTitle.mountedInstances.splice(0);
if (activeInstance) {
return activeInstance.props.title;
}
},
getActiveInstance: function () {
var length = DocumentTitle.mountedInstances.length;
if (length > 0) {
return DocumentTitle.mountedInstances[length - 1];
}
},
updateDocumentTitle: function () {
if (typeof document === 'undefined') {
return;
}
var activeInstance = DocumentTitle.getActiveInstance();
if (activeInstance) {
document.title = activeInstance.props.title;
}
}
},
getDefaultProps: function () {
return {
title: ''
};
},
isActive: function () {
return this === DocumentTitle.getActiveInstance();
},
componentWillMount: function () {
DocumentTitle.mountedInstances.push(this);
DocumentTitle.updateDocumentTitle();
},
componentDidUpdate: function (prevProps) {
if (this.isActive() && prevProps.title !== this.props.title) {
DocumentTitle.updateDocumentTitle();
}
},
componentWillUnmount: function () {
var index = DocumentTitle.mountedInstances.indexOf(this);
DocumentTitle.mountedInstances.splice(index, 1);
DocumentTitle.updateDocumentTitle();
},
render: function () {
if (this.props.children) {
return Children.only(this.props.children);
} else {
return null;
}
}
});
module.exports = DocumentTitle;
答案 1 :(得分:20)
看看NFL的react-helmet。
答案 2 :(得分:6)
class Layout extends React.Component {
constructor(props){
super(props);
document.title = this.props.title;
}
render(){
return(
<div>
</div>
);
}
}
然后<Layout title="My Title"/>
这很简单!
答案 3 :(得分:4)
尝试react-frozenhead,它实际上比反应文档标题更复杂 - 它允许我们更改标题,描述和部分中的任何其他内容。
答案 4 :(得分:0)