Question

我试图创建一个根据对象的属性值更改状态的按钮。

这是样式化的组件

df.columns = ["-".join(i.split("-")[::-1]) for i in df.columns]

print (pd.wide_to_long(df, stubnames=["Units","Rev","Trl"],
                       i=["Item","Name"], j="Date",
                       sep="-", suffix="\w+")
       .reset_index())

   Item Name Date Location  Units  Rev   Trl
0   123  ABC  Jan       CA     20  100  1.00
1   123  ABC  Feb       CA     30  150  1.50
2   123  ABC  Mar       CA     40  200  2.00
3   456  DEF  Jan       AZ     25  125  1.25
4   456  DEF  Feb       AZ     35  175  1.75
5   456  DEF  Mar       AZ     45  225  2.25

这是它在内部使用的组件

  const Btn = styled.button`
  border-radius: ${props => props.theme.radius};
  padding:5px 10px;
  background-color:${ sub.saved ? 'green' : 'red'}
  &:hover{
    cursor:pointer;
  }
`

Answer 1

您可以编写一个简单的功能组件，例如

，而不是像这样创建一个组件。

{}

您可以通过以下方式在主容器中调用此方法： const Btn = ( props ) => { <div style={{ borderRadius: {props.theme.radius}, padding:"5px 10px", backgroundColor: {props.sub.saved ? 'green' : 'red'} }}> {props.children} </div> }

Answer 2

对于 javascript 项目：

// you "add" the interface to button, so you can access this custom properties
export const Btn = styled.button`
  padding: 5px 10px;

  background-color: ${(props) => (props.isSaved ? "green" : "red")};

  &:hover {
    cursor: pointer;
  }
`;

对于打字稿项目，您可以使用界面设置自定义属性，例如：

// Create an interface defining custom properties to button
interface BtnProps {
  isSaved: boolean;
}

// you "add" the interface to button, so you can access this custom properties
export const Btn = styled.button<BtnProps>`
  padding: 5px 10px;

  background-color: ${(props) => (props.isSaved ? "green" : "red")};

  &:hover {
    cursor: pointer;
  }
`;

和您的按钮：

// set isSaved property to button component, 
// so you will have access to it on styled-components.
<Btn isSaved={sub.saved}
onClick={(e) => {
                e.stopPropagation()
                sub.saved = !sub.saved

}}>Save</Btn>

在样式化的组件中使用状态变量

2 个答案: