覆蓋React.js中的組件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 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>
        ) }
   }