Aufruf Elternfunktion von Kind der Kindkomponente reagieren

Question

Ich möchte einfach die Elternkomponente Funktion aus einer Enkelkomponente aufrufen.

Hier ist mein Enkelkind:

var ReactDOM = require('react-dom'); 
var React = require('react'); 

class Button extends React.Component { 
    constructor(props) { 
     super(props); 
     console.log(props); 
     this.state = { 
      options: props.options, 
      showDropdown: false 
     }; 
    } 
componentWillMount() { 
    var defaultFeatureOptionId = this.props.feature.DefaultFeatureOptionId;  
    var options = [...this.state.options] 
    var isBigButton = false; 
    options.forEach((option) => { 
     if (option.Description.length > 8) { 
      isBigButton = true; 
     } 
    }); 
    options.forEach((option) => { 
     var classes = ""; 
     if (isBigButton) { 
      classes = "option-button big-button hidden"; 
     } else { 
      classes = "option-button small-button hidden"; 
     } 
     if (option.Id === defaultFeatureOptionId) { 
      classes = classes.replace("hidden", " selected"); 
     } 
     option.class = classes; 
    }) 
    this.setState({ options }) 
} 
updateIllustration(value) { 
    console.log(this.props.onClick); 
    this.props.onClick(value); 
} 
toggleDropdown(index) { 
    var options = [...this.state.options]; 
    var option = options[index]; 

    this.updateIllustration(option.Option); 

    var showDropdown = !this.state.showDropdown; 
    this.setState({ 
     showDropdown: showDropdown 
    }) 
    options.forEach((opt) => { 
     opt.class = opt.class.replace("selected", ""); 
     opt.class = opt.class.replace("hidden", ""); 
     if (opt.Id !== option.Id && this.state.showDropdown) { 
      opt.class += " hidden"; 
     } 
     if (opt.Id === option.Id) { 
      opt.class += "selected"; 
     } 
    }); 
    this.setState({ options }) 
} 
render() { 
    if (this.state.options) { 
     return (<div> { 
      this.state.options.map((option, index) => { 
       return <div className={option.class} key={option.Id} onClick={() => this.toggleDropdown(index)}> 
        <div> {option.Description}</div> 
        <img className="option-image" src={option.ImageUrl}></img> 
        <i className={(this.state.showDropdown ? 'hidden' : ' fa fa-chevron-down') } aria-hidden="true" onClick={() => this.toggleDropdown(index)}></i> 
       </div> 
      }) 
     } 

     </div> 
     ) 
    } 
    else { 
     return <div>No options defined</div> 
    } 
} 
} 

module.exports = Button; 

Hier ist das Kind Komponente:

var ReactDOM = require('react-dom'); 
var React = require('react'); 
var Button = require('./button'); 
var Slider = require('./slider'); 

class Option extends React.Component { 
constructor(props) { 
    super(props); 
} 
updateIllustration(value) { 
    this.props.onClick(value); 
} 
render() {  
    if (this.props.type.Id === 1) { 
     return <div className="option"> <Button options={this.props.options} feature={this.props.feature} onClick={() => this.props.onClick} /></div> 
    } 
    if (this.props.type.Id === 2) { 
     return <div className="option"> <Slider options={this.props.options} feature={this.props.feature} onClick={() => this.props.onClick}/></div> 
    } 
    else { 
     return <div> No option type defined </div> 
    } 
} 
} 

module.exports = Option; 

Und hier ist die letzte übergeordnete Komponente:

var ReactDOM = require('react-dom'); 
var React = require('react'); 
var ConfigurationService = require('../configurationService'); 
var Option = require('./option'); 

class Feature extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     features: null 
    }; 
    this.getConfiguration(); 

} 
updateIllustration(object) { 
    console.log("MADE IT BACK"); 
    console.log(object); 
} 
getConfiguration() { 
    var self = this; 
    var config = ConfigurationService.getConfiguration('NORMSTAHL', 'SUPERIOR').then(function (config) { 
     console.log("TJE"); 
     console.log(config.data); 
     self.setState({ features: config.data.Features }) 
    });  
} 
render() { 
    if (this.state.features) { 
     return (<div className="feature-component-container"> { 
      this.state.features.map(function (feature) { 
       return <div className="feature" key={feature.Id}> 
        <div className="feature-header">{feature.Description} </div>{ 
         <Option options={feature.FeatureOptions} type={feature.Type} feature={feature} onClick={() => this.updateIllustration } /> 
        }      
       </div> 
      }) 
     } 
     </div>) 
    } 
    else { 
     return <div>no data</div> 
    } 
} 
} 

module.exports = Feature; 

Die Funktion i nennen wollen ist die updateIllustration Funktion und im Moment bekomme ich keine Fehler, aber es wird einfach nicht den ganzen Weg zurück zu bekommen console.log ("MADE IT BACK"); Ich habe über einen Weg gelesen, es mit einem Kontext zu tun, aber jeder sagt, dass es funktioniert, aber es wird nicht empfohlen. Was ist die empfohlene Vorgehensweise?

Answer 1

Sein ein Namenskonflikt Problem, In Mutter Sie die Funktion von onClick Namen sind vorbei so in Kind müssen Sie this.props.onClick statt this.props.updateIllustration verwenden. updateIllustration ist der Name der tatsächlichen Funktion und Sie übergeben diese Funktion unter anderem Namen. diese

Verwendung in Kinder Komponente:

<Button 
    options={this.props.options} 
    feature={this.props.feature} 
    onClick={() => this.props.onClick()} /> 

Update:

Sie brauchen diese Funktion aufzurufen.

Geordnete Komponente:

<Option ... onClick={() => this.updateIllustration() } /> //here use() 

In Child Komponente:

<Button ... onClick={() => this.props.onClick()} /> //here use() 

Sie haben vergessen, den Kontext, in map, zu binden, dass Problem zu lösen arrow function verwenden, wie Sie an anderen Orten verwenden:

this.state.features.map((feature) => {