Reactjs 防止div缠绕

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

该组件渲染：

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

你好，世界

为什么会增加额外的div

compose

似乎是通过将

Hello world

包装到另一个

---

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

我从该库的源代码中了解到，您需要指定一个节点引用作为组件的道具，否则默认情况下它将添加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>
  }
}

类应用程序扩展了React.Component{
node=null；
render（）{
this.node=el}className=“test”>
}
}

您指的是哪个

compose

函数？它只是一个包含高阶组件集合的包。我正在使用这个HOC，嗯，我试过了，但它仍然在添加div

this.node

似乎正在返回div test及其所有内容。我猜这是预期的？你们有运行版本的地方看吗？请看更新的代码。我添加了

applyFallbackStyles

函数，用于获取样式属性值。我没有正在运行的版本您可以在这里发布组件的完整代码吗？我试着使用lib，但是我没有定义时间

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