Реагировать составить предотвратить обертывание - PullRequest
Новая
       15

Реагировать составить предотвратить обертывание

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

У меня есть простой компонент в React: 

const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
  const { imageWidth } = ownProps;
  const divNode = node.querySelector( '.text' );
  return {
    fallbackImageWidth: getComputedStyle( divNode ).width,
  };
} );


class Image extends Component {
    constructor( props ) {
        super( ...arguments )
    }

    render() {
       <div className="test">Hello world</div>
    }
 }

и использование compose для переноса функции 

export default compose( [
    applyFallbackStyles,
] )( Image );

Компонент отображает: 

<div>
   <div className="test">Hello world</div>
</div>

Почему были добавлены дополнительные div? compose кажется, обернув <div className="test">Hello world</div> в другой <div>

Можно ли этого избежать? Или, по крайней мере, укажите для него имя класса.

1 Ответ

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

Как я понимаю из исходного кода этой библиотеки, вам нужно будет указать ссылку на узел в качестве реквизита для вашего компонента, иначе он добавит div по умолчанию. Чтобы избежать этого, может быть, вы можете сделать это

1) оберните ваш компонент элементом div и получите ссылку с этого элемента

2) установить этот элемент как опору узла для элемента изображения 

class App extends React.Component{
  node = null;
  render() {
    <div ref={el => this.node = el} className="test">
      <Image node={this.node} />
    </div>
  }
}
...