React render中如何通过自定义方法返回AccessibleTable组件

报错本质是JSX的子节点取值逻辑：你在render中写{this.selectedView}时，取到的是类里定义的selectedView方法本身（这是一个函数类型的值），并没有执行该方法拿到返回的JSX元素。React不会自动执行作为子节点传入的函数，因此抛出“函数不能作为React子节点”的错误。
你之前直接写<AccessibleTable />可以正常渲染，是因为JSX标签会被编译成合法的React元素对象，不属于可执行函数，完全符合React的渲染规则。

以下两种写法都可以实现通过自定义方法返回组件的需求：

• 显式调用自定义方法
  把原代码中的{this.selectedView}替换为{this.selectedView()}即可，将方法执行后的返回值作为子节点传入。需要注意保证方法执行时的this上下文能正确指向类实例，避免读取state、调用其他类方法时报错：
  • 可在类的构造函数中手动绑定方法的this指向
  • 可直接用类箭头函数属性的写法定义方法，自动完成this绑定
    示例代码：

  class YourPageComponent extends React.Component {
    constructor(props) {
      super(props);
      // 手动绑定this，保证方法内上下文正确
      this.selectedView = this.selectedView.bind(this);
    }
  
    selectedView() {
      // 可根据业务逻辑加入条件判断，返回不同JSX结构
      if (this.state.showTable) {
        return <AccessibleTable />
      }
      return <div>当前未选择视图</div>
    }
  
    render() {
      return (
        <div>
          <Header onLogout={this.onLogout.bind(this)}/>
          <div>
            {this.getInfo()}
            <div style={{"height": "275px"}}> </div>
            <div className="grid grid-cols-3 gap-4">
              <button 
                className="bg-gray-100 border-4 border-light-blue-300 hover:border-yellow-500" 
                onClick={this.setSelectedView}
              >Sstuff</button>
              <button className="bg-gray-100 border-4 border-light-blue-300 hover:border-yellow-500">More stuff</button>
            </div>
          </div>
          {/* 显式调用方法，传入返回的React元素 */}
          {this.selectedView()}
        </div>
      )
    }
  }
  

• 简洁写法：类箭头函数属性
  不需要在构造函数中手动绑定this，写法更简洁：

  class YourPageComponent extends React.Component {
    // 箭头函数类属性，自动绑定this指向类实例
    selectedView = () => {
      if (this.state.showTable) {
        return <AccessibleTable />
      }
      return <div>当前未选择视图</div>
    }
  
    render() {
      return (
        <div>
          {/* render其余结构同上，调用时同样需要加括号执行 */}
          {this.selectedView()}
        </div>
      )
    }
  }
  

• 不要直接把方法引用作为JSX子节点（即不带括号的{this.selectedView}写法），这种写法传给React的永远是方法本身，一定会触发函数子节点的报错
• 示例中导出的可访问表格组件存在拼写问题（导出名是AcccessibleTable，多了一个c），只要引入时的组件名和导出名对应，就不会影响正常渲染

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