Question

我有一个简单的功能：

fullscreen2 () {
    console.log('test')
}

我正在尝试将当前元素传递给它：

<div style={this.fullscreen2.bind(this)}>

该功能似乎没有触发。但是这有用：

<div style={this.fullscreen2()}>

Answer 1

首先，这取决于您是使用React.createClass（具有自动绑定）还是ES6类。

<div style={this.fullscreen2()}>

调用函数this.fullscreen2并将其返回值传递给此style标记的div。

<div style={this.fullscreen2.bind(this)}>

将函数的this对象（this.fullscreen2）绑定到当前this（例如实例类对象）。 What is the return type of Function.bind?

好吧，这个方法返回一个新函数，所以你将一个新函数传递给style对象！

修复将是：

<div style={this.fullscreen2.bind(this)()}>

但是再一次，你可能不需要绑定，参考Shubham Khatri的答案，没有绑定的例子。

仅当您需要访问：this.state，this.props或类似的特定于实例的属性时，绑定才有用，这些属性可能会因您定义函数的方式而丢失。

要了解更多这方面是如何工作的（当我的函数丢失上下文时，当它没有时），请查看lexical scope在JavaScript中的工作原理。

Answer 2

你不需要将valye绑定到函数，你可以直接在参数中传递它，如

＆＃13;

class App extends React.Component {
  
  function2 = (val, val2) => {
    console.log('in here', val, val2);
    if(val == '2')  {
      return {
          backgroundColor: 'blue'
      }
    } else {
      return {
          backgroundColor: 'orange'            
      }
    }
      
  } 
  render() {
    return (
     <div style={this.function2('2', '3')}>Hello World</div>
    )
  }

}

ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

＆＃13;

Answer 3

您也可以使用它：

class App extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.fullscreen2 = this.fullscreen2.bind(this);
  }

  fullscreen2 () {
    console.log('test')
  }

  render() {
    return(
      <div>
        <button onClick={this.fullscreen2}>fullscreen</button>
      </div>
    )
  }

}

export default App;

在style属性中使用.bind（this）

3 个答案: