How to use the createRef function from react

index.md?plain=1

GitHub: magicdawn/magicdawn

54
55
56
57
58
59
60
61
62
63

const wrappedFooComponent = forwardRef((props, ref) => {
  return <FooComponent theref={ref} {...props} />
})

const r = createRef()
ReactDOM.render(<wrappedFooComponent ref={r} />)
```

中间使用了 `props.theref` 做中转, 在 FooComponent 这里也可以 forwardRef, 避免 `theref` 取名

3

24

6

+ 3 other calls in file

tabs.js

GitHub: zotero/zotero

50
51
52
53
54
55
56
57
58
59

Object.defineProperty(this, 'deck', {
        get: () => document.getElementById('tabs-deck')
});

this._tabBarRef = React.createRef();
this._tabs = [{
        id: 'zotero-pane',
        type: 'library',
        title: ''

597

0

123

+ 3 other calls in file

Karaoke.jsx

GitHub: Jk950305/karaoke-app

13
14
15
16
17
18
19
20
21
22
23
24


class Karaoke extends React.Component {


	constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.sub = React.createRef();
        this.state = {
            action: 'stop',
            duration: undefined,

0

2

0

+ 2 other calls in file

mac.jsx

GitHub: JohnNkou/Portfolio

407
408
409
410
411
412
413
414
415
416
417
418


class ContentItem extends React.Component{
	constructor(props,context){
		super(props);
		this.state = { active: false };
		this.nodeRef = React.createRef();
		this.store = context.store;
	}


	componentDidMount(){

0

0

1

+ 10 other calls in file

ReactDOMFiber-test.js

GitHub: entertainc/Debug_React

1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
});

it('listens to events that do not exist in the Portal subtree', () => {
  const onClick = jest.fn();

  const ref = React.createRef();
  ReactDOM.render(
    <div onClick={onClick}>
      {ReactDOM.createPortal(<button ref={ref}>click</button>, document.body)}
    </div>,

0

0

1

+ 5 other calls in file

ReactNewContext-test.internal.js

GitHub: hankzhuo/learn-react-source-code

1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
    );
  }
}

const legacyProviderRef = React.createRef();
const appRef = React.createRef();

// Initial mount
ReactNoop.render(
  <LegacyProvider ref={legacyProviderRef}>

0

0

0

swipes.js

GitHub: mmsaki/igstyled-swipe-app

46
47
48
49
50
51
52
53
54
55
const currentIndexRef = useRef(currentIndex);
const childRefs = useMemo(
  () =>
    Array(people.length)
      .fill(0)
      .map((i) => React.createRef()),
  []
);
const updateCurrentIndex = (val) => {
  setCurrentIndex(val);

0

0

0

Note.tsx

GitHub: laurent22/joplin

92
93
94
95
96
97
98
99
100
101
        voiceTypingDialogShown: false,
};

this.saveActionQueues_ = {};

// this.markdownEditorRef = React.createRef(); // For focusing the Markdown editor

this.doFocusUpdate_ = false;

this.saveButtonHasBeenShown_ = false;

0

0

454

+ 3 other calls in file

index.js

GitHub: teu-ai/ant-design

55
56
57
58
59
60
61
62
63
64
// =========================== Hook ===========================
var getConfirmFunc = React.useCallback(function (withFunc) {
  return function hookConfirm(config) {
    var _a;
    uuid += 1;
    var modalRef = /*#__PURE__*/ React.createRef();
    var closeFunc;
    var modal = /*#__PURE__*/ React.createElement(_HookModal['default'], {
      key: 'modal-'.concat(uuid),
      config: withFunc(config),

0

0

2