2016-03-22 4 views
4

Из React docs (курсив мой):Почему возможно иногда привязывать ref к функции без гражданства?

Refs не может быть присоединен к безгосударственного функции, потому что компонент не имеет резервное экземпляр. Вы всегда можете обернуть компонент без состояния в стандартном составном компоненте и присоединить ref к составному компоненту.

И 0.14 changelog (курсив мой):

Поскольку ни один экземпляр компонента не создается для функционального компонента, любой исх добавил к одному оценит обнулить. Функциональные компоненты не имеют методов жизненного цикла, но вы можете установить .propTypes и .defaultProps как свойства функции.

В лекции 21 Dan Абрамова Redux egghead tutorials мы пишем следующее лица без функционального компонента для добавления TODO:

const AddTodo = ({ 
    onAddClick, 
}) => { 
    let input; 
    return <div> 
    <input ref = {node => { 
     input = node; 
     }} /> 

    <button onClick = {() => { 
      onAddClick(input.value) 
      input.value=''; 
     }}>Add Todo</button> 

    </div> 
} 

Это на самом деле работает, когда пристали к композитному компоненту приложения и ref не вернулся null, как обещал React docs!

Реализация AddTodo в композитном компоненте выглядит следующим образом:

class TodoApp extends Component { 

    render() { 
    //console.log(store.getState()); 
    log(); 
    const { 
     todos, 
     visibilityFilter, 
    } = this.props; 
    const visibleTodos = getVisibleTodos(
     todos, 
     visibilityFilter 
    ); 
    return (
     <div> 
      <AddTodo onAddClick = { 
       (input) => { 
       store.dispatch({ 
        type:'ADD_TODO', 
        text: input, 
        id: nextTodoId++, 
       }) 
       } 
      }/> 

Документы ли сказать, что мы можем обернуть без гражданства компонент в составном компоненте и прикрепить реф к композитному компоненту. Ключевым моментом здесь является привязка к составному компоненту, но моя ссылка по-прежнему привязана к stateless AddTodo в моей реализации.

Мои вопросы:

  1. AddTodo здесь действительно является лицом без гражданства функциональный компонент, является то, что не так ли?

  2. Если нет, то почему бы и нет? (Это определенно похоже на одно, но мне могут не хватать основных признаков того, что означает быть апатридом)

  3. Если да, то вопрос о том, как можно использовать ref, в соответствии с тем, что происходит представлены в документах React?

+0

Если бы я должен был догадаться, это было бы так, что документы ссылаются на 'ref' the prop not' ref' функцию обратного вызова. – azium

ответ

4

Объявление 1) Да, AddTodo - функциональный компонент без гражданства.

Ad 2) здесь делать нечего :-)

Ad 3) Вы добавляете реф к input, а не к AddTodo - вот почему это работает.Если вы смотрите на странице DOCS вы цитируемом,

При установке реф на компонент DOM как <div />, вы получите узел DOM обратно;

и это именно то, что вы хотите в своем коде.

Что вы не может сделать это: <AddTodo ref={component => ...} />, потому что нет ни одного случая AddTodo, которые могут быть переданы в функцию реф.

Смежные вопросы