css 如何在react styled with styled-components中更改按钮组件中的2个span内容？

ijnw1ujt 于 2023-05-19 发布在 React

关注(0)|答案(2)|浏览(156)

我想创建一个按钮组件，使用HTML如下。

<button class="button_57" role="button">
   <span class="text">Button</span>
   <span>Alternate text</span>
</button>

我希望能够使用一个按钮组件创建的React。
<CustomButton {...otherProps}>{children}</CustomButton>
有没有一种方法可以在Button组件中使用像这样的props来修改span内容？
<Button span_content1={''} span_content2={''}></Button>
我只发现传递跨度作为孩子的工作。

<Button>
   <span class='text'>Button</span>
   <span>Alternate text</span>
</Button>

css

来源：https://stackoverflow.com/questions/76232412/how-do-i-change-the-2-span-contents-within-a-button-component-in-react-styled-wi

2条答案

按热度按时间

ymdaylpp1#

当使用React时，我们可以创建这样的组件

function ButtonName({ content1, content2}) {
   return(
      <Button>
         <span class='text'>{content1}</span>
         <span>{content2}</span>
      </Button>
   )
}

创建组件后，我们可以像这样调用组件名称。
<ButtonName content1="Button" content2="Alternate text" />
要更改内容，我们可以将content1和content2替换为其他值

赞(0）回复(0）举报 2023-05-19

brgchamk2#

import styled from 'styled-components';

// Define your styled component
const CustomButton = styled.button`
  // Add your styles here
`;

const Button = ({ span_content1, span_content2, ...props }) => (
  <CustomButton {...props}>
    <span>{span_content1}</span>
    <span>{span_content2}</span>
  </CustomButton>
);

// Use your component
<Button span_content1="Button" span_content2="Alternate text" />

Button组件，接受span_content1和span_content2作为props，并将它们用作两个span元素的内容。其余的props（...props）被转发到CustomButton组件。
https://react.dev/learn/passing-props-to-a-component
https://styled-components.com/docs/basics#adapting-based-on-props

赞(0）回复(0）举报 2023-05-19

我来回答

css 如何在react styled with styled-components中更改按钮组件中的2个span内容？

2条答案

相关问题

热门标签

最新问答