时间戳

首页 > 解决方案 > 在 reactjs 中覆盖组件 toString 方法

javascript - 在 reactjs 中覆盖组件 toString 方法

问题描述

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

标签： javascripthtmlreactjsweb

解决方案

类组件必须实现 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"
         }
   }

C1 组件应如下所示

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

推荐阅读