如何将React组件的prop传递给样式化的组件

Question

我正在尝试根据其所在的React组件的const Styled = styled.div` height: ${props => props.height} ` class Parent extends React.Component { render() { return ( <Styled height={this.props.height}/> ) } } 设置样式化组件的高度。

我尝试了以下操作：

{{1}}

但是以某种方式不起作用。有人可以帮我吗？究竟是为了什么，我试图做的最好的做法是什么？

Answer 1

您使用的语法效果很好。我怀疑问题是height的值。我怀疑它不起作用，因为您指定的是像200这样的整数，而不是像200px这样的有效CSS高度字符串。

这是一个有效的简单示例：

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

const Styled = styled.div`
  height: ${props => props.height};
  background-color: blue;
  color: white;
`;

function App() {
  return (
    <Styled className="App" height="200px">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </Styled>
  );
}

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