已提交属性 onClick 事件触发后不会更新

Question

我认为我的 Styled Component 不会在 onClick event 被触发时更新。

将变量静态设置为 true 确实显示了它应该显示的内容。我尝试 console.log() 我正在更新的变量，它正在按照我的预期工作。

将 collapsedMenuIsActive 传递给 <StyledNavBarList>
toggleCollapsedMenu 将从 false 切换到 true 并在单击 <StyledNavBarBurger> 时反转

这是使用 onClick 事件切换变量的地方。

let collapsedMenuIsActive = false;

const toggleCollapsedMenu = () => {
    collapsedMenuIsActive = (!collapsedMenuIsActive);
}

{/* I have tried both of these two lines below here */}
{/* <StyledNavBarBurger onClick={toggleCollapsedMenu}> */}
<StyledNavBarBurger onClick={() => toggleCollapsedMenu}>
    ...
</StyledNavBarBurger>
<StyledNavBarList isActive={collapsedMenuIsActive}>
    ...
</StyledNavBarList>

这是我的样式组件。

export const StyledNavBarList = styled.ul`
    ...

    ${MEDIA.smallPhone`
        display: ${props => props.isActive ? 'block' : 'none'};
        ...
    `}
`;

我希望当 onClick 事件被触发时，我正在更新的变量将更新我的 styled component.

中的 props.isActive 值

Answer 1

你应该为此使用状态：

class Menu extends Component {
  state = {
    collapsedMenuIsActive: false,
  };

  toggleCollapsedMenu = () => {
    const status = this.state.collapsedMenuIsActive;
    this.setState({ collapsedMenuIsActive: !status });
  }

  render() {
    return (
      <React.Fragment>
        <button onClick={this.toggleCollapsedMenu}> Click me to change state</button>
        {this.state.collapsedMenuIsActive ? 'is active' : 'is not active'}
      </React.Fragment>
    );
  }
}

如果您现在将 this.state.collapsedMenuIsActive 传递给您的 StyledNavBarList 组件，它应该会执行所需的操作。

Answer 2

如果你想触发 React 基于变量重新渲染，你应该使用 setState 并将你的 collapsedMenuIsActive 存储在你的状态对象中。像下面这样的东西应该可以工作，但请注意，如果没有你的完整代码，它可能不准确：

export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsedMenuIsActive: false
        };
    }

    toggleCollapsedMenu = () => {
        // This will update the state in your state object
        // and instruct React to re-render this component with the new state.
        // It's important that you use the function form of setState when
        // changing the state based on current/previous state values.
        this.setState(state => ({
            collapsedMenuIsActive: !state.collapsedMenuIsActive
        }));
    }

    render() {
        return (
            <React.Fragment>
                <StyledNavBarBurger onClick={this.toggleCollapsedMenu}>
                    ...
                </StyledNavBarBurger>
                <StyledNavBarList isActive={this.state.collapsedMenuIsActive}>
                    ...
                </StyledNavBarList>
            </React.Fragment>
        );
    }
}

要了解有关 React 状态的更多信息，请阅读 official docs。请注意，React.Fragment 不是状态所必需的，它在这里用于简单地包装渲染中的两个组件以帮助完成此特定示例。它也可以只是一个 div 或被其他 node/element.

包裹

已提交属性 onClick 事件触发后不会更新

Submitted property won't update after onClick event is fired

javascript

reactjs

styled-components

已提交 属性 onClick 事件触发后不会更新

Submitted property won't update after onClick event is fired

javascript

reactjs

styled-components

已提交属性 onClick 事件触发后不会更新