Реагировать на подпорки внутри вложенного компонента - PullRequest
Новая
       9

Реагировать на подпорки внутри вложенного компонента

0 голосов
/ 04 января 2019

У меня возникают трудности с пониманием того, как создать довольно простой компонент, имеющий множество реквизитов, к которым нужно обращаться внутри вложенного компонента, внутри. Я даже не знаю, как это правильно объяснить мою ситуацию, несмотря на то, что я чувствую, что это должно быть просто.

Я объясню. У меня есть компонент следующим образом: 

<Widget
  layout="small"
  header="This is the header"
  icon={<UploadIcon/>}
  title="This is the title"
  caption="This is the caption to a widget it should have a character count"
  to="/tosomwhere"
  href="http://www.website.com"
  link="Link Title"
/>

И код компонента. 

const Widget = (props) => {
  return (
    <WidgetWrapper layout={props.layout}>
      hello world
      {props.title}
    </WidgetWrapper>
  );
}

Widget.propTypes = {
  layout: PropTypes.oneOf(['small', 'large', 'dual']),
  header: PropTypes.string,
  icon: PropTypes.element,
  title: PropTypes.string,
  caption: PropTypes.string,
  to: PropTypes.string,
  href: PropTypes.string,
  link: PropTypes.string,
};

Widget.defaultProps = {
  layout: 'small'
};

export default Widget;

Как вы видите, я включаю компонент внутри компонента. Его цель чисто визуальная (размер виджета, цвет, ext), но она должна обернуть все реквизиты, начиная с

Я могу получить доступ к props.layout, так как он находится за пределами компонента, но я не могу получить доступ к props.title внутри, который принадлежит.

Как это сделать? Нужно ли пропускать реквизиты, чтобы я мог получить к ним доступ таким образом? Я попытался добавить props={props} безуспешно ...

Ответы [ 3 ]

0 голосов
/ 04 января 2019

Я не уверен, полностью ли я понимаю вашу проблему. Хотите получить доступ к некоторым реквизитам в компоненте Widget из WidgetWrapper? в этом случае я думаю, что вы должны передать то, что вам нужно. Или у вас есть много реквизитов, которые вы хотите передать обертке?

0 голосов
/ 04 января 2019 
const RenderApp = props => {
  return (
    <div>
      hello {props.title}
    </div>
  );
}



class App extends React.Component {
  render(){
    return (      
        <RenderApp title="world"/>      
    );
  }
}

Это работает для меня и печатает "Привет, мир" ... Может быть, я упускаю суть ...

0 голосов
/ 04 января 2019

Я не думаю, что вы должны включать подобные метки в тег. Для написания своего React я использую только пропуск реквизита внутри тега, как вы сделали с props.layout, а затем используйте эти реквизиты внутри кода вашего WidgetWrapper.

Вместо того, чтобы писать каждую метку в теге, вы можете просто использовать оператор расширения: 

<WidgetWrapper {...props}/>
...