Структурирование React Native компоненты и элементы вложенности для более легкого использования - PullRequest
Новая
       11

Структурирование React Native компоненты и элементы вложенности для более легкого использования

0 голосов
/ 07 марта 2020

Есть ли способ в реагировании на родную систему для эффективного вложения значения this.props.children, передаваемого компоненту, чтобы сделать файлы более аккуратными и легкодоступными.

Возьмите компонент с именем Screen. Когда используется этот компонент, в настоящее время все необходимые переменные передаются ему в реквизитах, например: title, subtitle et c .. Это очень грязно, когда есть много переменных. 

<Screen title="Something" subtitle="Something" includeHeader="minimal" ... etc

Я надеялся на что-то более близкое к этому. 

<Screen>
   <Header>
     <Title>
     <Subtitle>
   </Header
   <Content>
   etc..

И затем смог получить доступ к ним в компоненте Screen, как это. 

this.header.title
this.header.subtitle

Например. Это проще, учитывая масштаб некоторых из этих компонентов. Возможно ли что-нибудь подобное?

1 Ответ

0 голосов
/ 07 марта 2020

Реквизит children - это просто еще один реквизит. Это действительно, и это простой API, который любой поймет: 

<Screen
  header={
    <Header>
      <Title>
      <Subtitle>
    </Header>
  }
  content={<Content />}
/>

Вы можете технически передать все в реквизиты children, а затем извлечь нужные элементы внутри экрана и манипулировать ими внутри. Компонент Screen выглядит так: 

function Header() {
  return "header";
}

function Body() {
  return "body";
}

function Screen({ children }) {
  return React.Children.map(children, child => {
    if (child.type === Header) {
      // do something here, shuffle them around, clone them and change them, delete them
      // you can read their props, put them in variable, pass them to other elements, etc.
      return (<div>Found header! {child}</div>)
    }

    return child
  });
}

function App() {
  return (
    <Screen>
      <div>Hello</div>
      <Header />
      <Body />
    </Screen>
  );
}

, но из-за этого * pubi c api компонента Screen будет нелегко gr asp.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...