在ReactJS中，我的代碼是否有支持實例，因此可以使用引用？

Question

我傾向於通過將JSX的各個部分組裝在一起來編寫ReactJS組件，如下所示。

我閱讀了此頁面https://facebook.github.io/react/docs/more-about-refs.html ，其中顯示“引用可能未附加到無狀態函數，因為該組件沒有后備實例”

我想知道的是，我編寫的代碼是否意味着我正在編寫沒有后備實例的無狀態函數？

還是我的代碼具有后備實例，因此可以使用引用

我希望能夠引用DOM元素，例如：

    <input
      onChange={() = {console.log(e)}
      ref=**some ref callback function**
      value="rabbit"
    />

但是我不知道考慮到我采用的編碼方法，這是否有可能。

例：

    import React, {Component, PropTypes} from 'react'

    export default class Blah extends React.Component {

      constructor(props) {
        super(props)
      }

      makeAnimal = () => {
        let animaltype = 'furry'
        if (animaltype === 'furry') {
          return (
            <input
              onChange={() = {console.log(e)}
              value="rabbit"
            />
          )
        } else {
          return (
            <input
              onChange={() = {console.log(e)}
              value="fish"
            />
          )
        }
      }

      makeForm = () => {
        let section = {}

        section.floob = (
            <input
              onChange={() = {console.log(e)}
              value="floob"
            />
        )

        section.flub = (
            <input
              onChange={() = {console.log(e)}
              value="flub"
            />
        )

        if (true) {
          return (
            <div>
              {section.flub}
            </div>
          )
        } else {
          return (
            <div>
              {section.floob}
              {this.makeAnimal()}
            </div>
          )
        }
      }


      render() {

        let section = {}

        section.extras = (
          <div>
            <h1>
              The heading!
            </h1>


    </div>
    )

    return (
      <div>
        {section.extras}
        {this.makeForm()}
      </div>
    )
  }
}

Answer 1

您是通過類創建組件的，因此它們不是無狀態的。 無狀態組件看起來像：

export default function Blah({ someProp, someOtherProp }) {
    return (
        <div>
            {someProp}
        </div>
    );
}

因此，在您的代碼中，保留引用應該起作用，但是<input>組件是無狀態的，因為它不是react組件，請參見下面的wintvelt答案。