无法在本机反应中访问关联 class 的功能

Question

I don't understand, why my code does not work. The Board has a Rack. Within the Board I want to access a function of the Rack. I get the error this.rack.getFields() is not a function .

Could it be that I cannot use JavaScript like I am used to in Java?

class Rack extends Component {
...
  getFields() {
     return this.fields;
  }
...
}



class Board extends Component {
  constructor(props) {
    super(props)

    this.fields = this.buildFields();
    this.figures = this.buildFigures();
    this.rack = this.buildRack();
  }
  
  someFunction() {
     ...
     rackFields = this.rack.getFields();   // <--- ???
     ...
   }
}

Board.js The Board has Fields, and a "Rack" itself also containing Fields. Perhaps the problem is caused by the way of buildRack()?

import React, { Component } from 'react';
import { ScrollView, View, Text, Button} from 'react-native';
import Draggable from 'react-native-draggable';
import Field from '../Components/Field';
import Figure from '../Components/Figure';
import Rack from '../Components/Rack';
import { Dimensions, DeviceInfo, Platform } from 'react-native';




class Board extends Component {
  screenWidth = Math.round(Dimensions.get('window').width);
  boardWidth=5;
  renderSize=this.screenWidth / this.props.boardWidth;
  margin = 1;
  fields;
  figures;
  rack;

  constructor(props) {
    super(props)

    this.state = {
      lastRefresh: Date(Date.now()).toString(),
    }

    this.fields = this.buildFields();
    this.figures = this.buildFigures();
    this.rack = this.buildRack();
  }

  headerHeight = 95;
  getFieldByPosition(x, y) {
    ix = Math.round( (x+this.renderSize/2) / (this.renderSize+this.margin), 0 )-1;
    iy = Math.round(((y+this.renderSize/2)-this.headerHeight) / (this.renderSize+this.margin), 0 )-1;

    result = [ix, iy];
    console.log('getFieldByPosition -> ' + result);
    return result;
  }

  getFieldPosition(ix, iy) {
     return [ix * (this.renderSize+this.margin), iy * (this.renderSize+this.margin)];
  }

  getFieldAt(x, y) {
     [ix, iy] = this.getFieldByPosition(x,y);
     fieldname = ix+'/'+iy;
     if (iy > this.props.boardWidth-1) {
         // außerhalb des Boards, im Rack?
         fieldName = 'rack_' + ix;
     }

     // Board Felder abgleichen
     for (var i = 0; i < this.fields.length; i++) {
        field = this.fields[i];
        console.log(field.props.name + " === " + fieldname);
        if (field.props.name === fieldname)
           return field;
     }

     // Rack Felder abgleichen
     rackFields = this.rack.getFields();
     for (var i = 0; i < rackFields.length; i++) {
       field = rackFields[i];
       console.log(field.props.name + " === " + fieldname);
       if (field.props.name === fieldname)
          return field;
     }

     throw 'field at position not found ' + fieldname
  }

  handleDrag(e, gestureState, draggable) {
      console.log('board drag');
      this.setState({ color: 'red' })
  }

  buildFields() {
    var fields = [];
    for (i = 0; i < this.props.boardWidth; i++) {
      for (k = 0; k < this.props.boardWidth; k++) {
        fields.push(
          <Field name={k+"/"+i}
                 key={k+"/"+i}
                 x={(this.renderSize+this.margin)*k}
                 y={(this.renderSize+this.margin) * i}
                 renderSize={this.renderSize}
                 color='green'
                 board={this}
          />
        )
      }
    }
    return fields;
  }

  buildFigures() {
    var figures = [];
    figures.push(
      <Figure name='K'
             key='K'
             x={(this.renderSize+this.margin)*2}
             y={(this.renderSize+this.margin) * 2}
             renderSize={this.renderSize}
             color="red"
             board={this}
             />
    )

    return figures;
  }

  buildRack() {
    var rack = (
      <Rack rackWidth={5} x={0} y={(this.renderSize+this.margin) * this.props.boardWidth}/>
    )
    return rack;
  }
  refreshScreen() {
    this.setState({ lastRefresh: Date(Date.now()).toString() })
  }





  calculateHeight = (this.renderSize+this.margin)*(this.props.boardWidth+2);
  render() {
    return (
      <ScrollView
          nestedScrollEnabled
          bounces={false}
          // You will need to figure out the height of inner content yourself
          contentContainerStyle={{ height: this.calculateHeight }}
          onScroll={(e)=>handleOnScroll(e)}

          >
          { this.fields }
          { this.rack }
          { this.figures }

      </ScrollView>
    )
  }
}

export default Board;

Answer 1

You can't access component's method just like traditional OOP. Because Rack is class component . For that you can make Racks as a normal class (remove extends) or else if there is parent child relation you can pass method using props .