Gatsby中的对象内的道具

Question

我正在尝试创建一个以边距值为道具的对象。 然后，将div的样式设置为同一对象，然后采用边距。

import React from 'react'
import Link from 'gatsby-link'
import { styles } from '../styles.js'

const margins = {
  marginTop: this.props.top,
  marginBottom: this.props.bot
}

const Header = ({ siteTitle }, props) => (
  <div style={margins}>
    <h1> Content </h1>
  </div>
)

export default Header

但是它没有用。 我怎样才能使道具正常工作？

谢谢

Answer 1

margins是一个简单的对象。
可能会有多种解决方法，但是我建议您针对这种情况检查styled-components （请参阅基于props进行适应 ）。

工作演示。

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const Content = styled.div`
  margin-top: ${props => props.top};
  margin-bottom: ${props => props.bot};
`;

const Header = ({ siteTitle }, props) => (
  // <div style={margins}>
  //   <h1> Content </h1>
  // </div>
  <Content top={"100px"} bottom={"500px"}>
    Some Content!
  </Content>
);

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

---

您可以找到一些我在gatsby网站上使用styled-components的示例。

https://github.com/dance2die/landingpage/blob/master/src/components/Emojis.js#L8

宣布了表情符号组件，并且

const Emoji = styled.img.attrs({
  src: props => props.src,
  alt: props => props.alt,
})`
  height: 3rem;
  margin-right: 2rem;
`

像这样通过传递src和alt描述来使用。

const CreationsEmoji = () => (
  <Emoji src={creationsEmoji} alt="Creations Emoji" />
)