Question

我在es6 +中介绍我的自我，我很难尝试将函数props传递给另一个组件。

这是我的代码：

 class ProductList extends React.Component {
    constructor(props) {
        super(props);
        this.onVote = this.handleProductUpVote.bind(this);
    }
    handleProductUpVote(productId) {
        console.log(productId +" was upvoted.")
    }
    render() {
        const products = Data.map((product) => {
            return (
                <Product 
                    key={'product-'+product.id}
                    id={product.id}
                    title={product.title}
                    description={product.description}
                    url={product.url}
                    votes={product.votes}
                    submitter_avatar_url={product.submitter_avatar_url}
                    product_image_url={product.product_image_url}
                    onVote={this.handleProductUpVote}
                />

            );
        });

        return (
            <div className="ui items">
                {products}
            </div>
        );
    }
}

我想在此组件（产品）中传递函数onVote

class Product extends React.Component {
    handleUpVote() {
        this.props.onVote(this.props.id).bind(this) /* the error is here, I am trying
 to pass the id props, and invoke the onVote prop here */
    }
    render() {
        return (
            <div className="item">
                <div className="image">
                    <img src={this.props.product_image_url} />
                </div>
                <div className="middle aligned content">
                    <div className="description">
                        <a onClick={this.handleUpVote}>
                            <i className="large caret up icon"/>
                        </a>
                        {this.props.votes}
                    </div>
                    <div className="description">
                        <a href={this.props.url}>
                        {this.props.title}
                        </a>
                    </div>
                    <div className="extra">
                        <span> Submitted by: </span>
                        <img 
                            className="ui avatar image"
                            src={this.props.submitter_avatar_url}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

我在这里没有其他道具的问题。我试图在handleUpVote上调用函数，我使用了bind，但是我无法使它工作。帮助

Answer 1

将传递给Product组件时，必须使用有界handleProductUpVote方法。

正如您在构造函数中看到的那样，您已将其绑定并分配给this.onVote属性。

有两种解决方案：

您应该在渲染方法中使用onVote={this.onVote}。
将构造函数中的属性onVote的名称更改为this.handleProductUpVote。您最终得到this.handleProductUpVote = this.handleProductUpVote.bind(this)并在渲染方法（即onVote={this.handleProductUpVote}）

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

更新

更新您的产品类：

class Product extends React.Component {
    constructor(props) {
        super(props);
        this.handleUpVote = this.handleUpVote.bind(this);
    }
    handleUpVote() {
        this.props.onVote(this.props.id)
    }
    // the render method
}

Answer 2

删除Product组件中handleUpVote（）中的绑定，然后像this.props.onVote(this.props.id);

一样调用它

如何使用React.Component在另一个组件上正确传递函数道具？

2 个答案: