从子组件的子项调用父函数作出反应

Question

我想简单地从孙组件调用父组件函数。

这是我的孙子：

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;

这是子组件：

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;

这是最后的父组件：

 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;

我想调用的函数是updateIllustration函数，现在我没有得到任何错误，但它根本不会一直回到console.log（“MADE IT BACK”）;我已经阅读了一个关于上下文的方法，但每个人都说它有效，但不推荐。那么推荐的做法是什么？