Question

我正在学习React，我不知道如何设置这种模式。这可能是我很容易失去的东西。

我有一个控制状态的主要组件。它具有更新状态的所有功能，并通过props将这些功能传递给子组件。我已经简化了代码，专注于其中一个功能。

现在这里是组件，一切正常：

ManageMenu.js

import React from 'react'

class ManageMenu extends React.Component {
  constructor() {
    super()

    this.toggleEditing = this.toggleEditing.bind(this)

    // Set initial state
    this.state = {
      menuSections: []
    }
  }

  toggleEditing(id) {
    const menuSections = this.state.menuSections

    menuSections.map(key => (key.id === id ? key.details.editing = id : ''))

    this.setState({ menuSections })
  }

  render() {
    return (
      ...
    )
  }
}

export default ManageMenu

toggleEditing通过props传递给子组件，如果单击编辑按钮，则子组件使用它来渲染编辑表单。

我在这个组件中有大约10个这样的不同函数，我想要做的是将它们移动到外部lib/methods.js文件然后引用它们。下面是我想要的代码，或类似的代码，但React并不喜欢我正在做的事情。引发语法错误：

Failed to compile.
Error in ./src/components/ManageMenu.js
Syntax error: Unexpected token
toggleEditing(id, menuSectionId, this.state, this)

这是我想做的......

LIB / methods.js

const toggleEditing = function(id, state, that) {
  const menuSections = state.menuSections

  menuSections.map(key => (key.id === id ? key.details.editing = id : ''))

  that.setState({ menuSections })
}

module.exports = {
  toggleEditing
}

然后在我的组件中：

ManageMenu.js

import React from 'react'
import { toggleEditing } from '../lib/methods'

class ManageMenu extends React.Component {
  constructor() {
    super()

    // Set initial state
    this.state = {
      menuSections: []
    }
  }

  toggleEditing(id, this.state, this)

  render() {
    return (
      ...
    )
  }
}

export default ManageMenu

感谢任何帮助，谢谢！

Answer 1

感谢@Nocebo，关于如何外部化函数的答案在这里： Externalise common functions in various react components

在我的特殊情况下，

我需要在不知名的地方删除“浮动”toggleEditing(id, this.state, this)电话。 更新：发生此错误“因为它正在调用类定义中的方法。”（请参阅Pineda的comment below）
删除this.

this.toggleEditing

constructor()

更新lib/methods.js中的功能以删除state和that个变量，因为它绑定到this

constructor()

请参阅下面的更新代码。

<强> ManageMenu.js

import React from 'react'
import { toggleEditing } from '../lib/methods'

class ManageMenu extends React.Component {
  constructor() {
    super()

    this.toggleEditing = toggleEditing.bind(this)

    // Set initial state
    this.state = {
      menuSections: []
    }
  }

  render() {
    return (
      ...
    )
  }
}

export default ManageMenu

<强> LIB / methods.js

const toggleEditing = function(id) {
  const menuSections = this.state.menuSections

  menuSections.map(key => (key.id === id ? key.details.editing = id : ''))

  this.setState({ menuSections })
}

module.exports = {
  toggleEditing
}

Answer 2

您出现错误是因为您在ManageMenu.js类定义中调用toggleEditing而不是定义函数。

您可以通过将本地类成员this.toggleEditing设置为.bind方法返回的绑定函数来实现您想要的内容，并在构造函数中执行此操作：

import React from 'react'
import { toggleEditing } from '../lib/methods'

class ManageMenu extends React.Component {
  constructor() {
    super()    
    this.state = {
      menuSections: []
    }

    // bind external function to local instance here here
    this.toggleEditing = toggleEditing.bind(this);
  }

  // don't invoke it here, bind it in constructor
  //toggleEditing(id, this.state, this)

  render() {
    return (
      ...
    )
  }
}

export default ManageMenu

将React中的函数从组件移动到引用的库

2 个答案: