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（请参阅Adapting based on 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);

---

您可以找到一些示例，其中我使用styled-components来访问gatsby网站。

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" />
)