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包装组件，并从该元素中获取引用

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

var para = document.createElement("p");
$("#div1").on('click', 'p' function(){
   $("p").hide();
 });

反应撰写防止div换行

1 个答案: