Question

我的React应用程序有几个类似的自定义按钮，可执行不同的任务。 UI在所有按钮中类似，每个按钮必须触发的动作和标题会发生什么变化。

包含按钮的父组件的工作代码与（类似）以下内容：

class Page extends Component { 
    constructor(props) {
        super(props);
    }

    action1(){
       //... do stuff...
    }

    action2(){
       //... do stuff...
    }

    render(){

        return(
            <div className="table-row">

                <div className="table-cell">
                    <div className="button" 
                        onClick={this.action1.bind(this)}>{"button1"}
                    </div>
                </div>

                <div className="table-cell">
                     <div className="button" 
                          onClick={this.action2.bind(this)}>{"button2"}
                     </div>
                </div> 
            </div>
        );
    }
}

是否可以像对变量值一样将方法传递给子组件？我想把它变成这样的东西：

class Page extends Component { 
    constructor(props) {
        super(props);
    }

    action1(){
       //... do stuff...
    }

    action2(){
       //... do stuff...
    }

    render(){

        return(
            <div className="table-row">

                <div className="table-cell">
                    <CustomButton action={this.action1.bind(this)} title={"button1"}/>
                </div>

                <div className="table-cell">
                     <CustomButton action={this.action2.bind(this)} title={"button2"}/>
                </div> 
            </div>
        );
    }
}

class CustomButton extends Component{
    constructor(props){
        super(props);
    }

    render() {
        return (
            <div className="table-cell"><div className="button" 
                onClick= {this.props.action}>{this.props.title}
            </div>
        );
    }
}

处理这种情况的正确方法及其背后的理论是什么？

我正在使用React with Meteor，以防它有所作为。

Answer 1

您可以将道具传递给组件。传递道具可以拥有任何数据类型的javascript。

在您的情况下，您希望传递一个具有函数值的动作道具。然后，您可以访问组件中的动作道具并使用它。

简而言之，它背后没有任何理论。你在做什么是正确的。这就是react处理将数据传递给其他组件的方式。请注意，这不是将数据传递给子组件的唯一方法。

将方法传递给子Component

1 个答案: