無 state 管理庫的帶數據提取的 SSR

Question

我正在嘗試制作一個 SSR 反應應用程序，但無法將道具從 express 傳遞到組件。 我在做什么錯？

服務器.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（快遞）

Answer 1

您的道具已經傳遞給 Page2 上的組件，但您渴望使用永遠不會被調用的 function，

componentDidMount()在組件安裝后立即調用（插入到 DOM 樹中）。

在您的情況下，您沒有將任何東西安裝到 DOM，因為 react 只會將您的組件渲染到 html 並且不會等待您的組件安裝，實際上您的 NodeJs 服務器中沒有 DOM，而您只是渲染組件並將其作為字符串返回，而不是將其插入 DOM。

你的道具已經在那里，你可以在你的 class 構造函數和你的渲染方法中控制台記錄它們：

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

在這個 state 中，您的組件將掛載而不是掛載，您也可以使用UNSAFE_componentWillMount控制台記錄您的道具，但顧名思義，它是不安全的ReactJS.org

您還可以創建自己的函數，它會起作用：

myFunction () {
   console.log(this.props.state)
}

myFunction();