Question

File1.tsx

class abc extends <abcProps, abcstate>
{
   constructor(){...}
}

class def extends abc {
   constructor(){
       super(props)
   }
}

export default{
  def_var: (props) => React.createElement(def, props)
}

File2.tsx

class xyz extends React.Component<xyzProps, xyzState> {
  //I want to make def the child of this classi.e xyz
  render(){
    return
      <div>
        <def .../>
      </div>
  } 
}

我已经创建了另一个组件的子类子节点，并且父类abc中的方法无法正常运行。

Answer 1

编写示例代码的方式，组件def中的构造函数不接受任何props - 因此调用super(props)实际上并没有做任何事情。

使用vanilla JavaScript，这是一个完全符合您要求的示例：

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

class HelloExtension extends Hello {
    constructor(props) {
        super(props);
    }
}

class XYZ extends React.Component {
    render() {
        return (
            <div>
                <h1>Inside XYZ Component</h1>
                <HelloExtension name="World" />
            </div>
        )
    }
}

ReactDOM.render(
  <XYZ />,
  document.getElementById('container')
);

TypeScript的唯一区别是props和state接口的强类型，您已在示例中使用过。

查看JS小提琴here。

ReactJS：当子组件是另一个类的子类时，道具不通过

1 个答案: