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

覆盖reactjs中的组件toString方法

1 个答案: