如何调用具有不同值的函数而不在每个渲染器上重新创建新的箭头函数？

Question

很明显，我们都知道，在类组件的render方法中使用箭头函数并不好，因为它会在每个渲染器上创建新函数。

例如

render() { 
    return (
        <div onClick={() => console.log('this is bad')}>I'm dangerous</div>
    )
}

但是就我而言，我要做的是有一个函数（foo），该函数接收一个参数并使用该参数设置状态。而且我有多个元素，每个元素都有不同的值来调用foo。

例如

foo = value => this.setState({value})

render() {
    return (
        <div>
            <div onClick={() => this.foo(1)}>1</div> //  this is also bad
            <div onClick={() => this.foo(2)}>2</div> //  this is also bad
            <div onClick={() => this.foo(3)}>3</div> //  this is also bad
            <div onClick={() => this.foo(4)}>4</div> //  this is also bad
            <div onClick={() => this.foo(5)}>5</div> //  this is also bad
        </div>
    )
}

所以我需要一个解决方法，我只需要传递不同的参数就可以调用相同的函数。

我想提出的是

1. 创建返回函数的函数

   foo = value => () => this.setState({value})
   
   render() {
       return (
           <div>
               <div onClick={this.foo(1)}>1</div> 
               <div onClick={this.foo(2)}>2</div> 
               <div onClick={this.foo(3)}>3</div> 
               <div onClick={this.foo(4)}>4</div> 
               <div onClick={this.foo(5)}>5</div> 
           </div>
       )
   }
   

   但是我认为这和第一个例子一样糟糕

2. 为每个值创建函数

   foo1 = value => this.setState({value})
   foo2 = value => this.setState({value})
   foo3 = value => this.setState({value})
   foo4 = value => this.setState({value})
   foo5 = value => this.setState({value})
   
   render() {
       return (
           <div>
               <div onClick={this.foo1}>1</div>
               <div onClick={this.foo2}>2</div>
               <div onClick={this.foo2}>3</div>
               <div onClick={this.foo4}>4</div>
               <div onClick={this.foo5}>5</div>
           </div>
       )
   }
   

在每个渲染上都创建一个新函数的情况下，这还不错，但是这样，我的组件就变得非常庞大而且非常糟糕。

考虑到这种情况，如何在不对每个渲染器创建新函数并且不为每个元素值创建一个函数的情况下实现此函数或渲染？

[请记住，在我的情况下，实数值不是数字（1234），onClick的元素不是简单的div元素，foo不仅调用this.setState ，但也可以做其他事情。这只是一个例子。

很明显，我们都知道，在类组件的render方法中使用箭头函数并不好，因为它会在每个渲染器上创建新的函数。例如render（）{return（<...>

Answer 1

我可以在data-attribute上添加div，然后像Nick Parsons所说的那样在event.target中使用onClick，根据他的评论，我提出了另一种可能更好的解决方案。

我可以创建一个接收value和onClick道具的组件，而在该组件内部，我将其称为this.prop.onClick(this.props.value)。这样，我将只向每个组件传递一个函数。

类似于data-attribute，但具有不同的道具。