無法在本機反應中訪問關聯 class 的功能

Question

我不明白，為什么我的代碼不起作用。 董事會有一個機架。 在板上，我想訪問機架的 function。 我收到錯誤this.rack.getFields() is not a function 。

難道我不能像以前在 Java 中那樣使用 JavaScript 嗎？

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 Board 具有字段，並且“機架”本身也包含字段。 也許問題是由 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

不能像傳統的 OOP 那樣訪問組件的方法。 因為Rack是class 組件。 為此，您可以將 Racks 制作為普通的 class （刪除擴展），否則如果存在父子關系，您可以使用props傳遞方法。