React 16版本页面白屏不渲染 代码问题排查

你的代码存在3处问题，其中构造函数的错误会直接导致应用初始化阶段抛出异常，无法完成渲染出现白屏：

• state初始化语法错误：类组件构造函数中不能直接给this.state.name赋值，此时this.state未被初始化，值为undefined，对undefined的属性赋值会直接抛出TypeError打断整个渲染流程。类组件中初始化state必须先将this.state赋值为一个完整对象。
• 输入框取值方法不存在：失焦事件回调中调用的this.val()不是React组件实例的内置方法，即使修复初始化问题，输入框失焦时也会抛出函数不存在的错误导致页面崩溃。输入框的值需要通过事件回调的参数e.target.value获取。
• 不规范的相等判断：代码中使用松散相等==判断name是否为null，存在隐式类型转换风险，建议替换为严格相等===。

修正后可运行代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';

class Person extends React.Component
{
    constructor(params)
    {
        super(params);
        // 正确初始化state对象
        this.state = {
            name: null
        };
    }
    
    render()
    {
        if(this.state.name === null)
            return(
                <div>
                    Hi, What's your name? 
                    <input 
                        type="text" 
                        onBlur={(e) => this.setState({name: e.target.value})} 
                    />
                </div>
            );
        else
            return(<div>Hello, {this.state.name}!</div>);
    }
}

class App extends React.Component
{
    render()
    {
        return(
            <div id="app">
                <Person />
            </div>
        )
    }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

替换后即可正常渲染：页面初始展示输入框提示输入姓名，输入完成点击输入框外部失焦后，会展示拼接了姓名的问候语。

内容的提问来源于stack exchange，提问作者Seth D. Fulmer