React JSX: Auswahl von "selected" für ausgewählte <select> Option

Question

In einem React-Komponenten für ein -Menü muss ich das selected-Attribut auf die Option setzen, die den Anwendungsstatus widerspiegelt. In render() wird der optionState vom Staatsinhaber an die SortMenu-Komponente übergeben. Die Optionswerte werden als props aus JSON übergeben. render: function() { var options = [], optionState = this.props.optionState; this.props.options.forEach(function(option) { var selected = (optionState === option.value) ? ' selected' : ''; options.push( {option.label} ); }); // übergeben Sie {options} an das Select-Menü jsx Dies löst jedoch einen Syntaxfehler bei der JSX-Kompilierung aus. Dies zu tun, beseitigt den Syntaxfehler, löst aber offensichtlich das Problem nicht: var selected = (optionState === option.value) ? 'selected' : 'false'; {option.label} Ich habe auch dies versucht: var selected = (optionState === option.value) ? true : false; {option.label} Gibt es eine empfohlene Methode, um dieses Problem zu lösen?

Answer 1

Ich hatte ein Problem mit -Tags, die sich nicht auf die richtige aktualisierten, wenn sich der Status änderte. Mein Problem schien zu sein, dass, wenn man zweimal schnell hintereinander rendert, das erste Mal ohne vorher ausgewählte , aber das zweite Mal mit einem, dann das -Tag nicht beim zweiten Rendern aktualisiert wird, sondern auf dem standardmäßigen ersten bleibt.

Ich habe eine Lösung dafür gefunden, indem ich Refs verwendet habe. Man muss eine Referenz zum Knoten seines -Tags (der vielleicht in einem anderen Komponenten verschachtelt ist) erhalten, und dann manuell das value-Eigenschaft darauf im componentDidUpdate-Hook aktualisieren. componentDidUpdate(){ let selectNode = React.findDOMNode(this.refs.selectingComponent.refs.selectTag); selectNode.value = this.state.someValue; }

Answer 2

Ich habe ein ähnliches Problem umgangen, indem ich defaultProps gesetzt habe:

ComponentName.defaultProps = {
  propName: ''
}

Jetzt vermeide ich Fehler bei der Kompilierung, wenn mein prop nicht existiert, bis es montiert wird.