React compose 防止 div 换行

Question

我在 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> 中

可以避免吗？或者至少为它指定一个类名。

Answer 1

我从该库的源代码中了解到，您需要将节点引用指定为组件的道具，否则默认情况下会添加 div。为了避免这种情况，也许你可以这样做

1) 用 div 包装你的组件并从该元素中获取 ref

2)将该元素设置为图像元素的节点道具

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