Question

我是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，但是只有meta标题对我有用.meta description和Meta og：tags保持静态。我的应用程序中有多个页面，我希望每个页面使用不同的meta标签。

Answer 1

只需在要创建标签的位置添加以下代码段即可：

this.$store.state.width

来源：https://support.shareaholic.com/hc/en-us/articles/115005177166-Adding-Meta-Tags-using-JavaScript?mobile_site=true

如何在React Node JS项目中从客户端创建动态元标签？

1 个答案: