Question

我是React的新手，如果我不熟悉术语，对不起。

我已经做了一些工作来更改现有的React组件并更新它显示的值。

现在，render函数返回一个带有一堆数据的对话框：

render() {
    const { selectedDate, labelText, dialogTitle, ...props } = this.props

return (
      <DialogField
        name="dialog-field"
        labelText={floatingLabelText}
        dialogTitle={dialogTitle}
        errorText="Please check your selection"
        userFriendlyValue={
          selectedDate
            ? [this.dateUtil.translateMonthShort(selectedDate.getMonth()), selectedDate.getFullYear()].join(' ')
            : ''
        }
      >
      </DialogField>
     )

我想使用userFriendlyValue中的函数并将其抽象为它自己的独立函数。为此，我在render函数上方添加了以下内容：

userFriendlyDate() {
    selectedDate
      ? [this.dateUtil.translateMonthShort(selectedDate.getMonth()), selectedDate.getFullYear()]
      .join(' ')
      : 'ERROR'
  }

将此添加到了我的constructor()中：

this.userFriendlyDate = this.userFriendlyDate.bind(this)

并更新了返回的元素：

    return (
      <DialogField
        name="dialog-field"
        labelText={floatingLabelText}
        dialogTitle={dialogTitle}
        errorText="Please check your selection"
        userFriendlyValue={this.userFriendlyDate}
      >
      </DialogField>
    )

但这不起作用。它不会引发任何错误，但也不会显示任何值。

有人会知道我做错了什么以及应该如何抽象此函数？

Answer 1

您不会在函数中返回任何值。

  userFriendlyDate() {
    return selectedDate
      ? [this.dateUtil.translateMonthShort(selectedDate.getMonth()), selectedDate.getFullYear()]
      .join(' ')
      : 'ERROR'
  }

我认为您应该调用它，而不是绑定它。

userFriendlyValue={this.userFriendlyDate()}

Answer 2

componentDidMount()：更新props和states的最佳方法是reactjs的componentDidMount生命周期方法。

React：如何将函数移出render（）函数？

2 个答案: