React コンポーネントで自分の子要素を取得するとき、Callback Refs を使っていた。v16.3 以降は、React v16.3.0: New lifecycles and context API によると、createRef API を使うのが普通なのかもしれない。
以下は、コンポーネントがマウントされたら、input タグにフォーカスをもってゆくコード。createRef 版はこう書く。
.js
export default class Parent extends Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentDidMount() {
this.inputRef.current.focus();
}
render() {
return <input type="text" ref={this.inputRef} />;
}
}
class Child extends Component {
render() {
return <div>{this.props.children}</div>
}
}
Callback Refs だとこうだ。
.js
export default class Parent extends Component {
componentDidMount() {
this.inputRef.focus();
}
render() {
return <input type="text" ref={node => this.inputRef = node} />;
}
}
Callback Refs でも、十分シンプルでイージーだと感じるのは私だけだろうか。「なるべく力の弱いものを使え！」という言葉を思い出した。この投稿で有用なのは最後の引用だけだ。