React页面加载时PageHeader组件H1标签不显示初始值的原因及解决方法

• <h1>属于普通文本类DOM标签，不支持value属性，仅<input>、<textarea>这类表单原生控件支持通过value属性赋值内容。原有代码中给h1绑定的value={props.title}不会生效，首次渲染时h1标签内部无任何文本，所以显示空白。
• contentEditable属性开启后，标签内容默认由DOM自身维护，原有写法没有给标签设置初始文本，自然无法展示预设的"New Page"。

仅需修改PageHeader.js代码即可，父组件Page.js逻辑无需调整：

1. 删除h1标签上的value属性，将props.title直接作为子内容插入到h1标签内部
2. 可添加suppressContentEditableWarning属性，消除React针对contentEditable元素绑定子内容的默认警告

修改后的PageHeader.js完整代码：

return (
        <div className = "page-header">
            <h1 
                className = "page-header-text" 
                contentEditable = "true" 
                onInput = {props.onChange}
                suppressContentEditableWarning={true}
            >
                {props.title}
            </h1>
        </div>
);

内容的提问来源于stack exchange，提问作者Aditya Karad