在 reactjs 中覆盖组件 toString 方法

【问题标题】：Override component toString method in reactjs在 reactjs 中覆盖组件 toString 方法
【发布时间】：2019-02-10 10:48:43
【问题描述】：

reactjs中如何覆盖类组件的toString方法？
这是代码

class C1 extends React.Component{
  render(){
    return (
      <div>
        {C2.toString()}
      </div>
    )

  }
}

class C2 extends React.Component{
  toString(){
    return "c2";
  }
}

ReactDOM.render(
  <C1 />,
  document.getElementById('root')
);

https://codepen.io/cheng-mo/pen/Odvbjw?&editable=true&editors=0010
预计在页面上显示“c2”而不是整个对象字符串

【问题讨论】：

标签： javascript html reactjs web

【解决方案1】：

类组件必须实现 render() 方法，因为它是强制性的。在您的代码中，C2 组件将无法工作，因为它没有实现 render 方法。所以把C2类组件改成函数式组件

    export function C2{
        return "c2";
    }

并将您的 C1 组件更改为如下所示

   class C1 extends React.Component{
     render(){
        return (
         <div>
            <C2 />
        </div>
        ) }
   }

如果您继续使用 C2 的类组件，那么

改变

   class C2 extends React.Component{
        toString(){
            return "c2";
        }
   }

到

 class C2 extends React.Component{
         render(){
              return "c2"
         }
   }

C1 组件应该如下所示

  class C1 extends React.Component{
     render(){
        return (
         <div>
            <C2 />
        </div>
        ) }
   }

【讨论】：

如果我的 C2 类有渲染方法会怎样。