Question

我将以下功能传递给以下组件......

<Main css={this.props.css} select={this.selectedCSS.bind(this)} save={this.saveCSS.bind(this)} />

然后在Main组件内我使用这些函数......

<h1>Select the stylesheet you wish to clean</h1>
{
    this.props.css.map(function(style){

        if (style) {
            return (<div className="inputWrap"><input type="radio" name="style_name" onClick={this.props.select(style)}/><span></span><a key={style}>{style}</a></div>)
                }
            })
        }

        </div>
        <button className="cleanBtn" onClick={this.props.save}>Clean!</button>

请注意，在map函数中，我正在通过this.props.select(style)。这是来自父级的函数，我试图向它传递一个参数。但是当我这样做时，我得到一个错误......

Error in event handler for runtime.onMessage: TypeError: Cannot read property 'props' of undefined

我传递的其他所有功能都有效。我已经测试了它们。实际上，代码有效，唯一的问题是当我尝试在map内传递函数时。这是什么原因？我该如何解决？

我尝试添加.bind(this)但是当我这样做时它会在无限循环中运行。

Answer 1

在映射函数中，this不再指向react组件。

手动绑定上下文以解决此问题：

{
    this.props.css.map((function(style) {
        if (style) {
            return (<div className="inputWrap"><input type="radio" name="style_name" onClick={this.props.select(style)}/><span></span><a key={style}>{style}</a></div>)
        }
    }).bind(this))
}

或者，使用ES6箭头功能，它可以保留周围的环境：

{
    this.props.css.map(style => {
        if (style) {
            return (<div className="inputWrap"><input type="radio" name="style_name" onClick={this.props.select(style)}/><span></span><a key={style}>{style}</a></div>)
        }
    })
}

Answer 2

问题在于Array.prototype.map除非明确告知，否则不会绑定this上下文。

this.props.css.map(function(style) {
  ...
}, this) // binding this explicitly

OR

this.props.css.map((style) => { // arrow function
  ...
})

OR

const self = this;
this.props.css.map((style) => {
  ... // access 'self.props.select'
})

我还看到了您的代码的另一个问题。在map内你正在做这个

if (style) {
    return (
        <div className="inputWrap">
            <input type="radio" name="style_name" onClick={this.props.select(style)}/>
            <span>something</span>
            <a key={style}>{style}</a>
        </div>
    );       
}

这里input元素期望它的onClick有一个函数，但你实际上是通过调用this.props.select(style)并传递它的返回值来评估函数（如果它返回的话）到onClick。相反，您可能需要这样做：

this.props.css.map((style) => {
    if (style) {
        return (
            <div className="inputWrap">
                <input type="radio" name="style_name" onClick={() => this.props.select(style)}/>
                <span>something</span>
                <a key={style}>{style}</a>
            </div>
        );       
    }
})

Answer 3

您提到在调用父级函数时传递参数？由于 onClick 需要对函数的引用（但意识到您需要传递参数），您可以尝试以下操作：

onClick={() => { this.props.select(style) }}

如何在react的map函数中使用父函数

3 个答案: