Интерфейсы материалов withTheme () скрывают компонент от ref prop - PullRequest
Новая
       5

Интерфейсы материалов withTheme () скрывают компонент от ref prop

0 голосов
/ 11 мая 2018

В редких случаях, когда вам нужна ссылка на другой элемент JSX в React, вы можете использовать ref prop, например: 

class Widget extends React.PureComponent {
  example() {
    // do something
  }
  render() {
...

<Widget ref={r => this.mywidget = r}/>
<OtherWidget onClick={e => this.mywidget.example()}/>

Здесь экземпляр Widget сохраняется в this.mywidget для последующего использования, и для него можно вызывать функцию example().

В интерфейсе материалов вы можете обернуть компоненты вокруг withTheme() вызова , чтобы сделать тему доступной в их объектах: 

export default withTheme()(Widget);

Однако, если это сделано, ref получает экземпляр WithTheme, а не Widget. Это означает, что функция example() больше не доступна.

Есть ли способ использовать ref с компонентом, обернутым withTheme(), чтобы к базовому объекту все еще можно было получить доступ таким же образом, как если бы withTheme() не использовался?

Вот пример, демонстрирующий проблему. Строки 27 и 28 могут быть прокомментированы / не прокомментированы, чтобы видеть, что вещи терпят неудачу, только когда добавлен вызов withTheme().

Edit Material demo

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Это более короткая альтернатива, основанная на ответе Шубхам Хатри.Этот ответ работает, когда вы не можете изменить внутренний компонент, этот пример немного короче, когда вы можете изменить внутренний компонент.

По существу ref не проходит через withTheme(), поэтому вам нужноиспользуйте опору с другим именем и самостоятельно реализуйте на ней функциональность ref: 

class Widget extends React.PureComponent {
  constructor(props) {
    props.ref2(this); // duplicate 'ref' functionality for the 'ref2' prop
...
const MyWidget = withTheme()(Widget);
...
<MyWidget
  ref2={r => {
    console.log(r);
    this.mywidget = r;
  }}
/>
0 голосов
/ 11 мая 2018

Чтобы получить ссылку на компонент, обернутый с помощью Style, вы можете создать обертку вокруг Widget и использовать ее с withStyles подобно 

const WithRefWidget = ({ innerRef, ...rest }) => {
  console.log(innerRef);
  return <Widget ref={innerRef} {...rest} />;
};
const MyWidget = withTheme()(WithRefWidget);

class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.mywidget = null;
  }
  render() {
    return (
      <React.Fragment>
        <MyWidget
          innerRef={r => {
            console.log(r);
            this.mywidget = r;
          }}
        />
        <Button
          onClick={e => {
            e.preventDefault();
            console.log(this.mywidget);
          }}
          variant="raised"
        >
          Click
        </Button>
      </React.Fragment>
    );
  }
}

Посмотрите на этот ответ длясм. другой альтернативный подход

потеря функций при использовании компонента перекомпоновки в качестве ref

Working Demo

...