Блог

Можно ли использовать свойство формы propType в качестве типа реквизита для другого компонента?

Напр.

 function App({ data}) {  return(  lt;divgt;  lt;Item item={data.item} /gt;  lt;/divgt;  ) }  const appPropTypes = PropTypes.shape({  foo: PropTYpes.string.isRequired,  item: PropTypes.string.isRequired, });  App.propTypes = {  data: appPropTypes; };  function Item({ item }) {  return lt;divgt;{item}lt;/divgt; }  Item.propTypes = {  item: , // How can I refer to appPropTypes.item here? }  

Очевидно, что приведенный выше пример очень прост.

Но в моем реальном случае использования item это намного сложнее, и я хотел бы избежать необходимости иметь дублированный код в appPropTypes и itemPropTypes

Не уверен в доступе к определенному типу, так как я считаю, что они предоставляют вам функцию. Таким образом, вместо доступа к item свойству из PropTypes вы, вероятно, могли бы просто сохранить элемент в его собственной константе и повторно использовать его по мере необходимости. Что — то вроде этого:

 const itemPropTypes = PropTypes.string.isRequired  const appPropTypes = PropTypes.shape({  foo: PropTYpes.string.isRequired,  item: itemPropTypes, });  App.propTypes = {  data: appPropTypes; }; ...  Item.propTypes = {  item: itemPropTypes }  

Вы можете использовать appPropTypes.item , если переместите вызов PropTypes.shape в то место, где определено поле данных.

Как здесь, в этом фрагменте кода:

 function App({ data }) {  return(  lt;divgt;  lt;Item item={data.item} /gt;  lt;/divgt;  ) }  const appPropTypes = { // PropTypes.shape moved below  foo: PropTypes.string.isRequired,  item: PropTypes.string.isRequired, };  App.propTypes = {  data: PropTypes.shape(appPropTypes), // PropTypes.shape moved here };  function Item({ item }) {  return lt;divgt;{item}lt;/divgt; }  Item.propTypes = {  item: appPropTypes.item, // appPropTypes.item here }  const rootElement = document.getElementById("root"); ReactDOM.render(lt;App data={{foo:"bar", item:"myItem"}} /gt;, rootElement); 

 lt;script src="https://unpkg.com/react@17/umd/react.development.js"gt;lt;/scriptgt; lt;script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"gt;lt;/scriptgt; lt;script src="https://unpkg.com/prop-types@15.6/prop-types.js"gt;lt;/scriptgt; lt;div id="root"gt;lt;/divgt;