gpt4 book ai didi

javascript - 没有状态管理库的具有数据提取的 SSR

转载 作者:行者123 更新时间:2023-12-04 11:43:57 25 4
gpt4 key购买 nike

我正在尝试制作一个 SSR react 应用程序,但无法将 Prop 从 express 传递到组件。
我在做什么错?
server.js

import AppPage2 from './src/project02/LandingPage';
......
......
server.get('/project2',async (req,res)=>{
const context = {data:'test'}
const sheet = new ServerStyleSheet();
const content = ReactDOMServer.renderToString(sheet.collectStyles(
<StaticRouter location={req.url} context={context}>
<AppPage2 state={{"foo":"baar"}}/>
</StaticRouter>)
);
const styles = sheet.getStyleTags();
let html = appShell( 'Project 2', content,' project2.bundle.js',styles)
res.status(200).send(html);
res.end()
})
AppPage2(./src/project02/LandingPage)
import React from 'react';
import {Wrapper,Title} from './styleComponent/testStylePage'
.......
.......
class AppPage extends React.Component {

componentDidMount() {
console.log("{{API}}",this,this.props, this.props.staticContext)
}

render(){
return(
<Wrapper>
<Title>This is project 01 </Title>
</Wrapper>
)
}
}

export default AppPage;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import AppPage from './project02/LandingPage'

ReactDOM.hydrate(
<AppPage></AppPage>,
document.querySelector('#root')
);
webpack.client.conf
const path = require('path');
const glob = require("glob");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;


const entry = glob.sync("src/*.js")
.reduce((x, y) => Object.assign(x,
{
[y.replace('src/','').replace('.js','')]: `./${y}`,
}
), {});



module.exports = {
target: 'node',
mode: 'development',//development,production
entry: entry,
output: {
filename:'[name].bundle.js',
path: path.resolve(__dirname,'build/public/'),
publicPath: '/build/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader'
},

},
]
},
plugins: [
// new BundleAnalyzerPlugin()
]
}
我无法从 AppPage2(./src/project02/LandingPage) 这个页面记录 console.log("{{API}}",this,this.props, this.props.staticContext) 我正在从服务器发送数据。 js( express )

最佳答案

您的 props 已经传递给 Page2 上的组件,但您渴望使用永远不会被调用的函数,componentDidMount()在安装组件(插入到 DOM 树中)后立即调用。
在您的情况下,您没有将任何东西安装到 DOM,因为 react 只会将您的组件渲染为 html,并且不会等待您的组件安装,实际上您的 NodeJs 服务器中没有 DOM,而您只是渲染组件并将其作为字符串返回,而不是将其插入 DOM。
你的 Prop 已经在那里,你可以在你的类构造函数和你的渲染方法中控制台记录它们:

class AppPage extends React.Component {

constructor (props){
super(props)
console.log("{{API}}",this,this.props, this.props.staticContext)
}

render(){
//or console log it here
console.log("{{API}}",this,this.props, this.props.staticContext)
return(
<Wrapper>
<Title>This is project 01 </Title>
</Wrapper>
)
}
}
在这种状态下,您的组件将挂载而不是挂载,您还可以使用 UNSAFE_componentWillMount 控制台记录您的 Prop 但正如它的名字所说,它是不安全的
ReactJS.org
您还可以创建自己的函数,它会起作用:
myFunction () {
console.log(this.props.state)
}

myFunction();

关于javascript - 没有状态管理库的具有数据提取的 SSR,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67712932/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com