korrekt this.props für die gesamte Komponente Destrukturierung

ich heute über ein Thema kam, sollten Sie folgende Komponente:korrekt this.props für die gesamte Komponente Destrukturierung

export default class Input extends React.Component { 
    someFunction() { 
    console.log(this.props.value) 
    } 

    render() { 
    const { type, value, required } = this.props 
    return (
     <div className={cx('Input')}> 
     <input type={type} value={value} required={required} /> 
     </div> 
    ) 
    } 
}

ich erfolgreich this.props bin destrucutring und sie innerhalb der machen können, aber was ist, wenn ich verwenden müssen prop Werte außerhalb davon, dh innerhalb someFunction() Ich bin mir nicht sicher, was die Folgen sein würde, wenn ich constant { ... } ausziehen und direkt nach export default class Input extends React.Component { Linie einschließen. Wird das noch gültig sein?

Quelle

2016-06-29 Ilja

schreiben Wenn Sie das tun, 'this.props' nicht definiert werden, da sie ausgeführt wird, bevor das Element gerendert wird. Warum willst du das machen? –

@JuanMendes für die Konsistenz, so dass ich nicht this.pros außerhalb Render auch schreiben müssen – Ilja

Ich sehe nicht den Punkt, was Sie tun, versuchen, zu vermeiden, const {Typ, Wert, erforderlich} = dies .props'? Schlechte Idee, würde ich sagen, es ist wahrscheinlich, dass Sie unterschiedliche Werte in verschiedenen Methoden benötigen. Wenn Sie ein echtes Beispiel mit Duplikation schreiben, das Sie vermeiden möchten, dann haben Sie selbst eine bessere Frage. Es ist unklar, warum du das brauchst, es sieht so aus, als ob du es überentwickelst –

Wenn Sie es nach draußen verschieben, wären sie null, weil Konstruktor zu diesem Zeitpunkt nicht aufgerufen hätte.

Es ist ein Empfehlungsansatz, es in Render oder Funktion zu halten, weil Ihre Elternkomponente den Status ändern kann, was dazu führt, dass Ihr Kind neu gerendert wird. Sie brauchen also für jedes Rendering frische Requisiten.

Quelle

2016-06-29 15:55:50

Vielleicht in Betracht ziehen, es zu einer funktionalen Komponente zu aktualisieren.

function someFunction(props) { 
    console.log(props.value) 
} 

function Input(props) { 
    const { type, value, required } = props; 

    someFunction(props); // logs props.value 

    return (
    <div className={cx('Input')}> 
     <input type={type} value={value} required={required} /> 
    </div> 
) 
} 

export default Input;

Quelle

2016-06-29 15:53:26 RickTakes

Ich denke, das OP will die Variablen 'type, value, required' bereits in anderen Funktionen definiert werden? Es ist schwer zu verstehen, wonach der OP wirklich sucht ... –

Ah, ich verstehe. Ich denke, dass sie dann herumgereicht werden müssen. Eine Redux-Lösung würde das ziemlich gut handhaben. – RickTakes

korrekt Destrukturierung this.props für die gesamte Komponente

Nun, Sie können das nicht tun. Die Destrukturierung kann nur lokale Variablen zuweisen, sodass Sie in jeder Funktion props destrukturieren müssen. Ansonsten ist nichts falsch daran, this.props.value zu schreiben. Verwenden Sie Destrukturierung, wenn es Lesbarkeit hilft, nicht nur weil Sie keine Lust haben, this.props einzugeben.

würde ich Ihren Code wie diese

// import cx from whatever 

const someFunction = value=> console.log(value) 

export const Input = ({type, value, required}) => (
    someFunction(value), 
    <div className={cx('Input')}> 
    <input type={type} value={value} required={required} /> 
    </div> 
)

Quelle

2016-06-29 16:17:25 naomik

korrekt this.props für die gesamte Komponente Destrukturierung

Antwort

Verwandte Themen