javascript - 重写reactjs中的组件toString方法

Question

如何在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”而不是整个对象字符串

Answer 1

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

    export function C2{
        return "c2";
    }

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

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

如果您继续 C2 的类(class)组件，那么

改变

   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>
        ) }
   }