React 渲染毫无意义的 div 打破了我的 flexbox 风格答案

【问题标题】：React renders pointless div breaking my flexbox styleReact 渲染毫无意义的 div 打破了我的 flexbox 风格
【发布时间】：2019-09-01 01:00:07
【问题描述】：

我对 React Native 很熟悉，但对 ReactJS 不太熟悉。我有一个样式问题：我正在为一个爱好项目修改这个库：https://github.com/rcdexta/react-trello，我感兴趣的代码如下所示：

// Render Method
return (
    <BoardDiv style={style} {...otherProps} draggable={false}>
      <UpdateModal
        isOpen={this.state.isOpen}
        onClick={this.closeModal.bind(this)}
        card={this.state.card}
        onRequestClose={this.closeModal}/>
      <PopoverWrapper>
        <Container
          orientation="horizontal"
          onDragStart={this.onDragStart}
          dragClass={laneDragClass}
          dropClass=""
          onDrop={this.onLaneDrop}
          lockAxis="x"
          getChildPayload={index => this.getLaneDetails(index)}
          groupName={this.groupName}>
          {reducerData.lanes.map((lane, index) => {
            const {id, droppable, ...otherProps} = lane
            const laneToRender = (
              <Lane
                key={id}
                boardId={this.groupName}
                id={id}
                getCardDetails={this.getCardDetails}
                onCardClick={(cardId, metadata, laneId) => {
                  const allCards = [].concat(...this.props.reducerData.lanes.map((lane) => lane.cards))
                  const cardData = allCards.filter((e) => e.id === cardId)[0]
                  this.modifyCardTitle(cardData)
                }}
                index={index}
                droppable={droppable === undefined ? true : droppable}
                {...otherProps}
                {...passthroughProps}
              />
            )
            return draggable && laneDraggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> :
              <span key={lane.id}>{laneToRender}</span>
          })}
        </Container>
      </PopoverWrapper>
      {canAddLanes && (
        <Container orientation="horizontal">
          {editable && !addLaneMode ? (
            <LaneSection style={{width: 200}}>
              <NewLaneButton onClick={this.showEditableLane}>{addLaneTitle}</NewLaneButton>
            </LaneSection>
          ) : (
            addLaneMode && this.renderNewLane()
          )}
        </Container>
      )}
    </BoardDiv>
)

但是渲染看起来像这样：

<div class="react-trello-board sc-bdVaJa eBPLjG" data="[object Object]" draggable="false">
  <div> <!--The problem-->
    <div class="smooth-dnd-container horizontal">
        <section title="will_apply" draggable="false" class="react-trello-board sc-htpNat dJewwL"
                 style="width: 25%;">
        </section>
    </div>
</div>

我的问题如下：我不知道为什么 React 创建了标记为问题的 div（参见上面的 sn-p）并且它破坏了我的“flexbox 工作流程”，因为 display: flex 没有通过它传播（它显示 @987654326 @)。

我有哪些选择？

我是否应该使用display: flex; flex:1 覆盖和设置所有divs 的样式？我可以查看创建此div 的位置和原因吗？

【问题讨论】：

可能的指导：stackoverflow.com/questions/33766085/…
ReactJS 不会自行创建任何容器，除非被告知 div 应该来自您使用的组件之一的深处。
我怀疑组件 Container 是罪魁祸首。可以分享一下那个组件的代码吗？

标签： javascript css reactjs flexbox

【解决方案1】：

也许你可以使用类似的东西来避免渲染不必要的 div：

<React.Fragment>
 <YourComponent />
 // ... Or the component content
</React.Fragment>

【讨论】：

【解决方案2】：

额外的div来自PopoverWrapper、here。

如here 所述，该库提供了两种样式设置方式。如果这不能满足您的需求，您需要更改代码以将类或样式传递给您想要设置样式的所需 DOM 元素。

【讨论】：