Wie setzen Sie die variable in render mit reactjs?

Ich habe eine reactjs rendermethod und ich bin versucht, eine variable durch eine Funktion, es sieht wie folgt aus(Sie Ahnen es , funktioniert nicht):

render() {
        let myVariable=''

        //this function changes/sets myVariable
        this.changeMyVariable()

        return (
            <div>{myVariable}</div>
        );
}

Wie kann ich eine variable, die verwendet wird in meinem render durch eine andere Funktion , so etwas wie das Beispiel oben. Ich habe auch versucht, eine statevariable aber die changeVariable Funktion läuft zweimal.

Wahrscheinlich, Sie jagen ein anti-pattern und wollte nicht verstehen, reagieren die Art und Weise des Denkens.
Kommentar von Inanc geknackt mich.

InformationsquelleAutor bier hier | 2016-11-23

  1. 18
    render() {
    //assuming 'changeMyVariable' returns a value
    const myVariable = this.changeMyVariable();

    return (
        <div>{myVariable}</div>
    );
}

    Eigentlich können Sie zum aufrufen der Funktion in Ihrem JSX selbst:

    <div>{this.changeMyVariable()}</div>.

    Hinweis: Wenn die Ausgabe von this.changeMyVariable() nie änderungen, basierend auf neuen Requisiten, es ist besser zu berechnen ist der Wert außerhalb render (vermeiden neu zu berechnen, wenn die Komponente neu gerendert).

    InformationsquelleAutor free-soul

  2. 1

    Allerdings können Sie die lokalen Variablen, die in der render, die Verwendung von Requisiten wird empfohlen, für eine bessere Modifizierbarkeit.

    So, dass Sie zunächst 'erklären' die Eigenschaft in der Komponente:

    class ExampleComponent extends React.Component {
    static propTypes = {
        myVariable: React.PropTypes.string.isRequired,
    };    
    static defaultProps = {
        myVariable: 'Default Value'
    };

    Und dann machen Sie diese prop am ExampleComponent render-Methode:

    render() {
    return (
        <div>{this.props.myVariable}</div>
    );
}

    Zur Nutzung dieser prop beim Rendern ExampleComponent:

    render() {
    <ExampleComponent myVariable='example'/>
}

    InformationsquelleAutor otorrillas

Schreibe einen Kommentar