Переопределить метод toString компонента вactjs

Question

Как переопределить метод toString компонента класса вactjs?
Вот код

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 не будет работать, потому что он не реализует метод рендеринга.Поэтому измените компонент класса 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"
         }
   }

И компонент С1 должен выглядеть следующим образом

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