我熟悉 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(见上面的片段)并且它打破了我的“flexbox 工作流程”,因为 display: flex
没有通过它传播(它显示 block
)。
我有哪些选择?
我是否应该使用 display: flex; 来覆盖和设置所有
?我可以查看创建此 div
的样式? flex :1div
的位置和原因吗?
最佳答案
额外的 div
来自 PopoverWrapper
,here .
该库提供了 2 种样式设置方式,如前所述 here .如果这不能满足您的需求,您将需要更改代码以将类或样式传递给您想要设置样式的所需 DOM 元素。
关于javascript - React 渲染毫无意义的 div 打破了我的 flexbox 风格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55614745/