css 与 react.js 的奇怪行为

Question

我的 Web 应用程序的（对我来说）行为真的很奇怪。应用型号为：

|-TaskBox
  \
   |-TaskList
     \
      |-TaskElement
      |-TaskElement
  \
   |-AddNewTask

而且我在每个 TaskElement 下都有奇怪的白色间隙，如图所示：

任务元素在react中渲染的代码为：

return (
    <div className="taskElement" style={this.state.style}>
        <div className="textArea">
            <p>{this.state.text}</p>
        </div>
        <div className="iconsArea">
            <i className="material-icons" onClick={this.toEditMode}>mode_edit</i>
            <i className="material-icons" onClick={this.Delete}>delete</i>
            <i className="material-icons">keyboard_arrow_down</i>
            <i className="material-icons">keyboard_arrow_up</i>
        </div> 
     </div>
);

我不知道为什么会出现这种差距，但是当我将任何纯文本符号添加到 xml 时，渲染代码差距就会消失。那里到底发生了什么？

ex 间隙消失：

和。添加到此处的代码： return（

<div className="taskElement" style={this.state.style}>
            <div className="textArea">
                <p>{this.state.text}</p>
            </div>
            <div className="iconsArea">
                <i className="material-icons" onClick={this.toEditMode}>mode_edit</i>
                <i className="material-icons" onClick={this.Delete}>delete</i>
                <i className="material-icons">keyboard_arrow_down</i>
                <i className="material-icons">keyboard_arrow_up</i>
       </div> .  (this is the dot i added)
       </div>
    );

Answer 1

您的 taskElement 是 inline-block，因此添加 vertical-align: top 应该可以解决问题。

css 与 react.js 的奇怪行为

STRANGE behavior of css with react.js

javascript

css

web

reactjs

react-jsx