个人中心
gpt4 book ai didi

javascript - 如何在 react 节点 js 项目中从客户端创建动态元标记？

转载 作者：行者123 更新时间：2023-11-30 06:12:09 25 4
gpt4 key购买 nike

我是 react-redux 的新手。我正在使用 Firebase、Webpack、Redux、React、Express 来构建我的应用程序。

This is my redux store:

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')
)

This is my 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>

Main container code

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 file:

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 保持静态。我的应用程序中有多个页面，我希望每个页面都有不同的元标记。

最佳答案

只需在要创建标签的位置添加此代码段:

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 节点 js 项目中从客户端创建动态元标记？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58235788/

25 4 0
文章推荐： javascript - JS/JQuery 中的去抖动滚动事件是如何工作的？
文章推荐： java - CDI bean 的 Servlet 和范围
文章推荐： java - 如何从对象列表中删除重复项
文章推荐： javascript - 需要帮助让原型(prototype)方法循环遍历数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com