React父组件获取子元素ID调用ReactDOM.render渲染按钮失败如何解决

无法正常渲染的核心原因 #

• 依赖缺失：父组件代码未引入ReactDOM就直接调用ReactDOM.render方法，同时使用了jQuery的$选择器但未引入jQuery，直接触发运行时报错。
• 语法错误：JSX中按钮标签写为< button（标签名和左尖括号中间有多余空格），不符合JSX语法规范，无法被正常解析。
• 命名不规范：父组件名parentComponent首字母小写，不符合React组件首字母必须大写的要求，可能被识别为普通HTML标签导致渲染异常。
• 冗余操作：document.getElementById直接返回目标DOM节点，不需要转成jQuery对象再取下标[0]，多余操作反而增加报错概率。

快速修复方案 #

直接修改父组件代码补全缺失内容即可生效：

import React, { Component } from "react";
// 补全ReactDOM引入
import ReactDOM from 'react-dom';
// 组件名首字母大写
class ParentComponent extends Component {
    constructor(props) {
         super(props); 
    }

    onClick = () =>{
         console.log("some functionality is done")
    }

    componentDidMount(){
        const targetDom = document.getElementById("child_place_holder")
        if(targetDom){
             // 去掉按钮标签的多余空格，直接传入原生DOM节点
             ReactDOM.render(<button onClick={this.onClick}>按钮</button>, targetDom);
        }
    }

    render() {
        return (
          <div>
             <ChildComponent/>
          </div>
        );
    }
}

export default ParentComponent;

更符合React规范的实现方案 #

直接操作DOM手动注入组件的方式不符合React声明式编程逻辑，后续维护成本高，容易出现DOM不同步的问题，推荐用Props传值的方式实现需求：

子组件修改 #

import React, { Component } from "react";

class ChildComponent extends Component {
   constructor(props) {
       super(props);  
   }
  
   render() {
      return (
        <div>
          <span id = "child_place_holder">
            {/* 渲染父组件传入的自定义内容 */}
            {this.props.customContent}
          </span>
        </div>    
      );
   }
}

父组件修改 #

不需要再操作DOM，也不需要写生命周期逻辑，直接通过Props传值即可：

import React, { Component } from "react";

class ParentComponent extends Component {
    constructor(props) {
         super(props); 
    }

    onClick = () =>{
         console.log("some functionality is done")
    }

    render() {
        return (
          <div>
             {/* 直接把要渲染的按钮传给子组件 */}
             <ChildComponent customContent={<button onClick={this.onClick}>按钮</button>}/>
          </div>
        );
    }
}

export default ParentComponent;

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