React类中handleClick无法调用外部Welcome函数的原因及解决办法

咱们先搞清楚为什么handleClick函数没达到预期效果：

1. JSX元素未被React处理：你在handleClick里写的<Welcome />只是创建了一个React元素对象，但React不会自动把这个元素挂载到DOM上。只有当组件的render方法（或者函数组件的返回值）包含这个元素时，React才会处理它并渲染到页面，同时执行组件内部的代码。

2. 函数组件的执行逻辑：Welcome是一个函数组件，它内部的代码（比如console.log）只有在React渲染这个组件的时候才会触发。仅仅在事件处理函数里创建<Welcome />元素，既不会渲染UI，也不会执行组件里的代码。

另外，你当前的handleClick函数甚至没有对这个创建出来的元素做任何处理，所以完全不会有任何效果。

根据你的实际需求，分两种场景给出解决方案：

场景1：点击按钮后渲染Welcome组件到页面 #

这是React开发中最常见的需求，我们可以通过状态管理来控制组件的显示：

function Welcome(props) { 
  console.log("Welcome Back"); 
  return <div>Welcome!</div>; // 给组件添加要渲染的UI内容
}

class App extends React.Component {
  constructor(props){
    super(props);
    // 添加状态控制是否显示Welcome组件
    this.state = { showWelcome: false };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    // 更新状态，触发组件重新渲染
    this.setState({ showWelcome: true });
  }
  render(){
    return (
      <div>
        <button onClick={this.handleClick}>CLICK HERE </button>
        {/* 根据状态决定是否渲染Welcome组件 */}
        {this.state.showWelcome && <Welcome />}
      </div>
    );
  }
}

点击按钮后，showWelcome状态变为true，App组件会重新渲染，此时Welcome组件会被渲染到页面，同时触发它内部的console.log代码。

场景2：仅需点击后执行Welcome里的逻辑（不渲染UI） #

如果你的目的只是触发Welcome里的console.log，不需要渲染UI，建议把逻辑抽离出来，或者直接调用函数：

方法A：抽离公共逻辑（推荐） #

把需要执行的逻辑单独放在一个函数里，让Welcome组件和handleClick都调用它，这样代码更清晰，也符合React的设计理念：

// 抽离公共逻辑函数
function showWelcomeMessage() {
  console.log("Welcome Back");
}

function Welcome(props) { 
  showWelcomeMessage();
  return <div>Welcome!</div>;
}

class App extends React.Component {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    // 直接调用公共逻辑函数
    showWelcomeMessage();
  }
  render(){
    return (
      <div>
        <button onClick={this.handleClick}>CLICK HERE </button>
      </div>
    );
  }
}

方法B：直接调用Welcome函数（不推荐） #

虽然可以直接调用Welcome()来执行内部代码，但这不是React组件的正确使用方式（组件的核心作用是描述UI），仅作为临时方案参考：

function Welcome(props) { 
  console.log("Welcome Back");
}

class App extends React.Component {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    // 直接调用函数组件
    Welcome();
  }
  render(){
    return (
      <div>
        <button onClick={this.handleClick}>CLICK HERE </button>
      </div>
    );
  }
}

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