Próbuję uczynić komponent Div z niewielką klasą. Będę musiał go później ocenić w stanie obiektu, więc robię go tak, że klasa Div wynosi "Piece" State. Aby zmienić stan, stworzyłem funkcję w zewnętrznym pliku JS, który zwraca wartość losową z danej listy, jako takie:

var pieceAssignment = function() {
    const pieceValues = [
        "blue-piece",
        "green-piece",
        "purple-piece",
        "red-piece"
    ];

    var i = Math.floor(Math.random() * 4);
    var pieceClass = pieceValues[ i ];

    return pieceClass
}

exports.pieceAssignment = pieceAssignment;

Sprawdziłem funkcję za pomocą prostego alertu i działa pozornie w porządku. Nie mogę jednak przypisać go w samym komponencie.

import React, { Component } from 'react';
var pieceAssignment = require('../util/PieceAssignment').pieceAssignment;

class X1Y1 extends Component {
    constructor(props){
        super(props);
        
        this.assignNewPiece = this.assignNewPiece.bind(this);

        this.state = {
            piece: null,
            type: 'regular',
            layers: 0,
            xCoordinate: 1,
            yCoordinate: 1,
        }
    }

    assignNewPiece() {
        var newPiece = new pieceAssignment();

        this.setState = {
            piece: newPiece
        }
    }

    componentDidMount(){
        this.assignNewPiece();
    }

    render() {
        return(
            <div className="game-cell">
                <div className= { this.state.piece } onClick={ this.assignNewPiece }></div>
            </div>
        )
    }
}

export {
    X1Y1
}

Jedną z strategii, które wykorzystywałem do debugowania, było przypisanie this.state = {piece: new pieceAssignment()}, w którym to przypadku składnik został renderowany z klasą [Obiekt obiektu].

Próbowałem każdego rozwiązania, które mogłem znaleźć na 5 stronach Google i nadal nie znalazłem sposobu na wyodrębnienie wartości i poprawnie przypisania go do klasy div.

Jakieś wskazówki?

0
Rodrigo M. Castilho 11 lipiec 2020, 15:49

2 odpowiedzi

Najlepsza odpowiedź

Usuń new z połączenia pieceAssigment() - ponieważ nie używasz go jako klasy.

Pamiętaj również, że setState jest funkcją:

assignNewPiece() {
    var newPiece = pieceAssignment();

    this.setState({
        piece: newPiece
    })
}
1
cbr 11 lipiec 2020, 13:02

@CBr przybijał tę sprawę. Oto kod pracy:

import React, { Component } from 'react';
var pieceAssignment = require('../util/PieceAssignment').pieceAssignment;

class X1Y1 extends Component {
    constructor(props){
        super(props);
        
        this.assignNewPiece = this.assignNewPiece.bind(this);

        this.state = {
            piece: null,
            type: 'regular',
            layers: 0,
            xCoordinate: 1,
            yCoordinate: 1,
        }
    }

    assignNewPiece() {
        var newPiece = pieceAssignment();

        this.setState({ piece: newPiece });
    }

    componentDidMount(){
        this.assignNewPiece();
    }

    render() {
        return(
            <div className="game-cell">
                <div className= { this.state.piece } onClick={ this.assignNewPiece }></div>
            </div>
        )
    }
}

export {
    X1Y1
}
0
Rodrigo Castilho 11 lipiec 2020, 13:02