Question

我倾向于通过组合JSX的位来编写我的ReactJS组件，例如下面的例子。

我读了这页https://facebook.github.io/react/docs/more-about-refs.html，上面写着“Refs可能没有附加到无状态函数，因为组件没有后台实例”

我想知道的是我写的代码是否意味着我正在编写没有后台实例的无状态函数？

或者我的代码是否有后备实例，因此可以使用refs

我希望能够对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>
    );
}

所以在你的代码中保持refs应该有效，但<input>组件是无状态的，因为它不是反应组件，请参阅下面的wintvelt答案。

在ReactJS中，我的代码是否有后备实例，因此可以使用refs？

1 个答案: