[英]Dynamically change styled component based on state AND index
So I have a list that was returned from an API request (not important) lets call it list = [1,2,3,4,5,6,7];
因此,我有一个从API请求返回的列表(不重要),可以将其称为
list = [1,2,3,4,5,6,7];
Now, inside render(), I have something like the following 现在,在render()中,我有如下内容
render(){
<Wrapper>
{list.map((i) => {
return (<Button id = {i} onClick = {this.customFunc.bind(this, i)} />)
}
</Wrapper>
}
Now, I have another list, lets call it list_check = [false...]
(for all 7 elements listed above) 现在,我有了另一个列表,让我们称之为
list_check = [false...]
(对于上面列出的所有7个元素)
Assume that customFunc
changes the respective button id in list_check
from false to true. 假设
customFunc
变化中的相应按钮ID list_check
从虚假到真实的。
eg if I clicked button 1 (id = 1)
then list_check
becomes [false, true, false...]
例如,如果我单击按钮1
(id = 1)
则list_check
变为[false, true, false...]
** Now my problem is: I have 2 styled components, Button
and Button_Selected
, how can i dynamically change between the 2 styled components so that if that unique button is clicked (change list_check[index] = true
), the element becomes Button_Selected
instead of Button
(The entire list is initalized as Button
since all elements are false
) **现在我的问题是:我有2个样式化的组件
Button
和Button_Selected
,我如何在2个样式化的组件之间动态更改,以便如果单击该唯一按钮(更改list_check[index] = true
),则该元素变为Button_Selected
的Button
(由于所有元素均为false
因此整个列表都被初始化为Button
)
Just to make it clear: Both arrays are located in this.state
and by 2 styled components I mean there exists 为了清楚
this.state
:两个数组都位于this.state
,由2个样式化的组件组成,我的意思是存在
const Button = styled.div`
//styling here
`;
and 和
const Button_Selected = Button.extend`
//Small styling change to differentiate between selected and not selected
`;
edit: all answers are great! 编辑:所有答案都很棒! too bad I can only select one :(
太糟糕了,我只能选择一个:(
You could just save the component to another variable. 您可以将组件保存到另一个变量。
this.state.list_check.map((item, i) => {
const NecessaryButton = item ? SelectedButton : Button;
return <NecessaryButton onClick={() => this.makeSelected(i)}>Normal Button</NecessaryButton>
})
Although you can return 2 buttons based on conditional rendering .You can also pass props to your styled Button
so that based on props you can change your styles. 尽管您可以基于条件渲染返回2个按钮。您还可以将道具传递给
styled Button
以便基于道具可以更改样式。
render(){
<Wrapper>
{list.map((i) => {
return (<Button id = {i} isSelected={this.state.list_check[i]} onClick = {this.customFunc.bind(this, i)} />)
}
</Wrapper>
}
And in your styled Button: 在您的样式按钮中:
const Button = styled.div`
styleName: ${props => props.isSelected ? 'styling_if_Selected' : 'styling_if_not_selected'};
`;
The easiest approach would be to have a single Button component and handle in the state if it was selected. 最简单的方法是只有一个Button组件,并在处于选中状态的状态下进行处理。 Depending on this state you could switch classes.
根据此状态,您可以切换类。 Example:
例:
class Button extends React.Component {
state = {
isSelected: false
};
handleClick() {
//Here we will set the state change and call the onClick function passed by props
this.setState({isSelected: !this.state.isSelected}, () => { this.props.onClick(); });
}
render() {
return (
<button
class={this.state.isButtonSelected ? "classBtnSelected" : "classBtnDefault"}
onClick={this.handleClick}
/>
);
}
}
Still, if you want to switch components you can use state to control if it was selected and do a conditional rendering. 不过,如果要切换组件,则可以使用状态来控制是否选择了状态,并进行条件渲染。 Example:
例:
render(){
<Wrapper>
{list.map((i) => {
return (this.state.isSelected
? <Button id={i} onClick = {this.customFunc.bind(this, i)} />
: <Button_Selected id={i} onClick = {this.customFunc.bind(this, i)} />)
}
</Wrapper>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.