• 深入某个组件内部
    • 子组件
    • 父组件
  • 参考资料:

    深入某个组件内部

    通过父组件去访问子组件.
    比如一个能自动focus的输入框(通过父组件控制自动focus)

    子组件

    子组件是一个带有input标签和focus方法的组件. 其中focus方法能focus到对应的HTML元素上.

    1. class Input extends Component {
    2.   focus() {
    3.     this.el.focus();
    4.   }
    6.   render() {
    7.     return (
    8.       <input
    9.         ref={el=> { this.el = el; }}
    10.       />
    11.     );
    12.   }
    13. }

    父组件

    在父组件中,我们能得到子组件的引用并且调用子组件的focus方法.

    1. class SignInModal extends Component {
    2.   componentDidMount() {
    3.     // Note that when you use ref on a component, it’s a reference to
    4.     // the component (not the underlying element), so you have access to its methods.
    5.     this.InputComponent.focus();
    6.   }
    8.   render() {
    9.     return (
    10.       <div>
    11.         <label>User name:</label>
    12.         <Input
    13.           ref={comp => { this.InputComponent = comp; }}
    14.         />
    15.       </div>
    16.     )
    17.   }
    18. }

    参考资料:

    • https://hackernoon.com/10-react-mini-patterns-c1da92f068c5