代码之家 › 专栏 › 技术社区 › Sventies

传递带有功能组件的道具,而不在组件内声明功能

react-props arrow-functions callback reactjs javascript

Sventies · 技术社区 · 7 年前

我迭代了一个项目列表,并想调用一个函数onClick()。示例如下:

class App extends Component {
    state = { items: [1, 2, 3, 4] };

    click = i => console.log(i);

    render() {
        return (
            <div>
                {this.state.items.map(item => (
                    <div 
                        key={item} 
                        // this works fine, but I rather not declare functions within the render function / JSX
                        onClick={() => this.click(item)}
                    >
                        {`click on # ${item}`}
                    </div>
                ))}
            </div>
        )
    }
}

如您所见,我在JSX中声明了一个函数。我一次又一次地这样做,但不久前我了解到,出于性能原因,应该避免在组件JSX本身中声明函数。

注: 我期待着在某个时候使用钩子,但现在我只想知道不使用钩子的最佳实践。

也就是说,如果您确定这是一个相关的问题,并且由于挂钩的原因直到现在才得以解决,那么我显然希望了解:)

3 回复 | 直到 7 年前

Jonas Wilms 7 年前

功能组件也是如此吗?

render()

如果是这样,有没有其他方法将动态信息(在本例中是项)传递给回调?

你可以 .bind(...) 它:

 onClick = {console.log.bind(console, item) }

但真的,你有没有注意到重播的延迟?可能不是,如果是的话,这不是由函数声明引起的。编写看起来很漂亮的代码,不要为编译器优化,让编译器来做吧。

但不久前我了解到,应该避免在组件JSX本身中声明函数

你不应该真的回避它,如果可能的话,你应该选择其他方式。在这种情况下,真的没有更好的方法,所以继续吧。

Tnc Andrei 7 年前

您可以像这样声明另一个方法。别忘了使用 .bind . 否则,将无法正确调用该方法。

class App extends Component {
    state = { items: [1, 2, 3, 4] };

    handleClick(item) {
        // do something
        console.log(item);
    }
    render() {
        return (
            <div>
                {this.state.items.map(item => (
                    <div 
                        key={item} 
                        // this works fine, but I rather not declare functions within the render function / JSX
                        onClick={this.handleClick.bind(this, item)}
                    >
                        {`click on # ${item}`}
                    </div>
                ))}
            </div>
        )
    }
}

Guy Gavergun 7 年前

您可以创建一个父组件,该组件将负责遍历项目,并将单击处理程序作为道具向下传递给每个单独的子组件。

this.props.onClick

函数(对象)在JavaScript中通过引用传递。通过在父作用域中声明它,它只会占用那里的空间。如果在子组件中初始化,它将在内存中为每个子组件的函数创建空间。

class Parent extends Component {
    state = { items: [1, 2, 3, 4] };

    parentClick(item) {
        // do something
        console.log(item);
    }
    render() {
        return (
            <div>
                {this.state.items.map(item => (
                  <Child item={item} onClick={this.parentClick}>
                ))}
            </div>
        )
    }
}



class Child extends Component {

    childClick(item) {
        this.props.onClick(item)
    }

    render() {
        return (
            <div>
                <p onClick={this.childClick(this.props.item)}>this.props.item</p>
            </div>
        )
    }
}