Это вторая часть статьи, я буду обсуждать предварительную тему о renderProps. Тема: «получить доступ к renderProps компоненту state из вызванного компонента и расширить view компонента renderProps из вызванного компонента.
Если вы понятия не имеете о renderProps . вы можете прочитать мою первую часть этой статьи, чтобы узнать об основах понимания реквизитов рендеринга, по ссылке ниже.
Доступ к state другого компонента или дочернего компонента из родительского компонента с помощью renderProps .
В моей предыдущей статье я показал, как передать функцию как children props в renderProps компонент. С помощью Render Props Мы также можем получить доступ к renderProps компоненту state, только передаем состояние в качестве аргумента children реквизиту из renderProps компонента.
- Сначала создайте файл
ResuableListView.jsxв папкеsrc. он содержит компонентResuableListView(renderProps).
(1) В строке 6 установите состояние selectedValue, которое затем используется для передачи этого значения с реквизитами children.
(2) В строке 16…28 создайте представление списка, от строки 17 до строки 18, проверьте, что массив имеет элемент с помощью this.props.list && this.props.list(map => ...)statement, в строке 21 добавьте css style, который создаст курсор в качестве указателя. в строке 22 добавьте функцию onclick selectedItemValue , которая изменяет состояние selectedValue из списка. В строке 24 отобразите item со значением text.
(3) Реализуйте функцию, которая изменит состояние selectValue, используя функцию this.setState({}) во время выбора и отмены выбора элемента из list.
(4) Это special props с именем children для renderProps, он будет отображать children, который передается от вызываемого компонента, как children. children также используется для передачи value в вызываемый компонент и расширения компонента renderProps в вызываемый компонент.
Расширить компонент renderProps до вызываемого компонента
На рисунке 2 я передал список книг в качестве реквизита render списку с ResuabledListView .
В строке с 4 по 9 добавьте массив BookList, который затем использует его для списка рендеринга в ReusableListView. В строках с 15 по 22 я реализовал элемент ResuableListView renderProps и расширил компонент, чтобы отобразить выбранное значение до компонента Books. В строках с 16 по 12 создайте функцию и передайте function как children to ResuableListView .
В строке 17 проверьте, что ResuableListView имеет selectedValue, который передается из компонента ResuableListView, покажите выбранное значение в div в компоненте Books.jsx (Invocked).
Когда пользователь выбирает элемент в компоненте ResuableListView, он отображает компоненты с selectedValue по Books.jsx как часть компонента, полученного из ResusableListView. С помощью следующего кода мы можем расширить компонент ResuableListView из компонента Books, не касаясь компонента ResuableListView.
