javascript - 删除组件之间的空间

Question

我在 svg 组件和 html 标题之间发现了空格，我想将其删除。

我正在尝试使演示正常运行，但我没有得到它。

class App extends React.Component {
  constructor() {
    super();

  }
  
  render() {
  const myStyle= {
  fontFamily: "Lato",
  backgroundColor: "#0099ff",
  margin:0
}
    return (
      <div>
        <Wave />
        <p style={myStyle}>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
};

class Wave extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#0099ff" fillOpacity="1" d="M0,32L48,69.3C96,107,192,181,288,181.3C384,181,480,107,576,112C672,117,768,203,864,208C960,213,1056,139,1152,101.3C1248,64,1344,64,1392,64L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 1

这是因为 SVG，所以一种解决方案是在 Wave 下方的第二个组件上添加 marginTop:-5

class App extends React.Component {
  constructor() {
    super();

  }
  render() {
  const myStyle= {
  fontFamily: "Lato",
  backgroundColor: "#0099ff",
  padding:0,
  marginTop:-5
}
    return (
      <div>
        <Wave />
        <p style={myStyle}>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
};

class Wave extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
    <div style={{border:'1px solid red'}}>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#0099ff" fillOpacity="1" d="M0,32L48,69.3C96,107,192,181,288,181.3C384,181,480,107,576,112C672,117,768,203,864,208C960,213,1056,139,1152,101.3C1248,64,1344,64,1392,64L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>
    </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>