Sono davvero nuovo per React, e mi sto tirando fuori i capelli cercando di risolvere quello che mi sembra un problema semplice. Ecco una foto del componente che ho costruito.Comunicazione padre-figlio in React (JSX) senza flusso
Quello che sto cercando di realizzare sembra banale, ma letteralmente ogni articolo che ho letto che spiega cosa fare mi ha detto qualcosa di diverso, e non una delle soluzioni ha funzionato. Si riduce a questo: quando un utente fa clic su un tag, costruisce un vassoio e scorre attraverso una serie di colori per creare pulsanti colorati. Quando si fa clic su un pulsante colorato, è necessario passare a quale colore è stato fatto clic sul relativo componente principale ed eseguire una funzione per aggiornarne il colore. Ho letto di flusso, di eventi che ribollono, di legare "questo" a una proprietà e nessuna di queste soluzioni è sembrata funzionare. I documenti di React sono praticamente inutili per un principiante come me. Voglio evitare complicate strutture di eventi come il flusso a questo punto poiché sto aggiungendo alcuni componenti semplici a un'app esistente che non ho scritto in React in origine.
Inoltre, PS, questo codice è in JSX, il che per me è molto più sensato del semplice JS reagire. Grazie in anticipo per il vostro aiuto!
var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];
var EditDrawer = React.createClass({
updateColor: function() {
console.log("New Color: " + i);
},
render: function(){
var passTarget = this;
return (
<div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
<div className="row">
<div className="col-xs-12">
{colorsArray.map(function(object, i){
return <ColorButton buttonColor={object} key={i} />;
})}
</div>
</div>
</div>
);
}
})
var ColorButton = React.createClass({
render: function(){
var buttonStyle = {
backgroundColor: this.props.buttonColor,
};
return (
<div className="tag-edit-color-button" style={buttonStyle} >
</div>
)
}
})
Come nota , ecco due tecniche che ho provato ad usare ma che non funzionavano. http://haochuan.io/how-to-communicate-between-pure-react-components-without-flux/ http://andrewhfarmer.com/component-communication/#3-callback-functions –