React JS Inheritance получить данные

Question

Привет, я разрабатываю приложение с React JS. У меня проблема.

TopBottomCard.js

export default class TopBottomCard extends Component {
constructor(props){
    super(props)

}

 getEnlem(){
    return this.props.enlem
}

render() {
    return (
    <div>
    example</div>
   )}

Map.js

import TopBottomCard from './TopBottomCard'

export default class Map extends TopBottomCard {
constructor(){
    super(this)
}


render() {
    const top = new TopBottomCard()
    const url = 'https://www.example.com/map.html?'+top.getEnlem+''
    console.log(url);

    return (
        <div style={{height:'100vh'}}>

        </div>
    )
}
  }

Когда я перехожу на страницу localhost: 3000 / map, я получаю выводвот так.

Вывод:

https://www.example.com/map.html?function () { [native code] }

Когда я изменяю переменную "url" на странице Map.js следующим образом, выдает ошибку.

 const url = 'https://www.example.com/map.html?'+top.getEnlem()+''

Код ошибки: TypeError: Невозможно прочитать свойство 'enlem' из неопределенного. Как мне решить эту проблему?

Answer 1

Когда вы создаете класс 'Map', убедитесь, что конструктор получил реквизиты и передал их родителю, использование super (this) не сработает. Также убедитесь, что вы действительно отправляете реквизиты в созданный вами класс, чтобы он не был неопределенным.

class TopBottomCard extends React.Component {
    constructor(props){
        super(props)
    }

    getEnlem(){
        return this.props.enlem
    }

    render() {
        return (
            <div>example</div>
        )
    }
}

class Map extends TopBottomCard {
    constructor(props) { // get the props in this constructor as well
        super(props) // and pass them to the parent constructor
    }

    render() {
        const top = new TopBottomCard({}) // you need to send props so it will not be undefined in the component
        const url = 'https://www.example.com/map.html?' + top.getEnlem() + ''  
        return (
            <div style={{height:'100vh'}}>
            </div>
        )
    }
}