如何在反应节点 js 项目中从客户端创建动态元标记？
Posted
技术标签:
【中文标题】如何在反应节点 js 项目中从客户端创建动态元标记？【英文标题】：How to create dynamic meta tags from client side in react node js project? 【发布时间】：2020-02-02 18:08:47 【问题描述】：我是 react-redux 的新手。我正在使用 Firebase、Webpack、Redux、React、Express 来构建我的应用程序。
这是我的 redux 商店：
import React from 'react'
import ReactDOM from 'react-dom'
import routes from './config/routes'
import createStore, applyMiddleware, combineReducers from 'redux'
import Provider from 'react-redux'
import thunk from 'redux-thunk'
import * as reducers from './redux/modules'
const store = createStore(combineReducers(reducers), applyMiddleware(thunk))
ReactDOM.render(
<Provider store=store>
routes
</Provider>,
document.getElementById('app')
)
这是我的 index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Time is Money!</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="description" content="Test description.">
//links to css and js files.
</head>
<body style="margin: 0;">
<div id="app"></div>
</body>
</html>
主容器代码
import React from 'react'
import createReactClass from 'create-react-class';
import Header from 'components';
import Footer from 'components';
import bindActionCreators from 'redux'
import connect from 'react-redux'
import * as AuthActionCreators from 'redux/modules/users'
import ref, firebaseAuth from 'config/constants'
import browserHistory from 'react-router'
import baseUrl from '../../config/constants'
const MainContainer = createReactClass(
//another code
render ()
return (
<div>
<Header fullName=this.props.fullName
uid=this.props.uid
location=this.props.location
/>
<div style=marginTop: '100px', display: 'inline-block', width: '100%'>this.props.children</div>
<Footer/>
</div>
)
)
function mapStateToProps(state, props)
return
//...redux store state and props are here
function mapDispatchToProps(dispatch)
return bindActionCreators(Object.assign(, AuthActionCreators), dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(MainContainer)
server.js 文件：
var express = require('express')
var path = require('path')
var app = express()
app.use(express.static(path.join(__dirname, 'dist')))
app.get('*', function (req, res)
console.log("In server")
res.sendFile(path.join(__dirname, 'dist', 'index.html'))
)
var PORT = process.env.PORT || 8080
app.listen(PORT, function()
console.log('Production Express server running at localhost:' + PORT)
)
我也尝试过 react-helmet，但只有元标题对我有用。元描述和元 og:tags 保持静态。我的应用程序中有多个页面，我希望每个页面都有不同的元标记。
【问题讨论】：
【参考方案1】：只需在要创建标签的地方添加这段代码 sn-p：
var link = document.createElement('meta');
link.setAttribute('property', 'og:url');
link.content = document.location;
document.getElementsByTagName('head")
[0].appendChild(link);
来源：https://support.shareaholic.com/hc/en-us/articles/115005177166-Adding-Meta-Tags-using-javascript?mobile_site=true
【讨论】：
这是一段 JavaScript 代码。有没有其他方法可以在 react node js 中实现元标记？ 对不起，我想我错过了什么。 Node 是一个 Javascript 服务器，而 React 是一个 Javascript 库。两者都将使用javascript（几乎）一切。以上是关于如何在反应节点 js 项目中从客户端创建动态元标记？的主要内容，如果未能解决你的问题，请参考以下文章
如何在反应中从对象映射动态设置 sessionStorage