代码之家 › 专栏 › 技术社区 › deadcoder0904

使用react.create ref创建引用,而不在react中使用构造函数?

ref reactjs javascript

2

deadcoder0904 · 技术社区 · 6 年前

基本上,我用过 constructor 在里面 React 只有三个原因-

1。初始化 `state` 像-

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { counter: 0 };
    }
}

但由于巴别塔的缘故 class-field 支持,我不再使用它了

class App extends React.Component {
    state = { counter: 0 };
}

2。到 `bind` 功能类似-

class App extends React.Component {
    constructor(props) {
        super(props);
        this.increment.bind(this);
    }

    increment() {

    }
}

但由于 arrow 功能,我不再做了

class App extends React.Component {
    increment = () => {

    }
}

三。使用 `createRef` 像-

class App extends React.Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }
}

所以我可以使用 React.createRef 不使用 构造函数 反应?

4 回复 | 直到 6 年前

1

3

Ana Liza Pandac 6 年前

您可以将其声明为类字段,就像 state .

class App extends React.Component {
  state = { counter: 0 };
  inputRef = React.createRef();
}

Babel将在第2阶段的预设中把它分解成类似下面的代码。

constructor(props) {
    super(props);

    this.state = { counter: 0 };
    this.inputRef = React.createRef();
  }

2

1

Mohamed Ramrami 6 年前

对。就像你在州里所做的那样(在Babel的类字段支持下):

class App extends React.Component {
    inputRef = React.createRef();
}

3

1

Avanthika 6 年前

您可以不使用构造函数创建带有引用回调的引用。 <input ref={(element) => { this.inputRef = element; }} /> 是你需要的。

4

1

Chris 6 年前

是的,你可以。例如:

const MyComponent = () => {
  const inputRef = React.createRef();

  return (
    <input ref={inputRef} />
  );
}

你唯一的东西不能做,就是通过 ref 功能组件的属性:

render() {
  // This won't work.
  return <MyFunctionalComponent ref={this.inputRef} />
}

官方文件提供的更多信息, here :

但是,您可以使用 裁判 只要引用一个dom元素或一个类组件,函数组件内部的属性就可以:

使用react.create ref创建引用,而不在react中使用构造函数?

1。初始化 state 像-

2。到 bind 功能类似-

三。使用 createRef 像-

1。初始化 `state` 像-

2。到 `bind` 功能类似-

三。使用 `createRef` 像-