Question

我认为Styled Component被解雇后不会更新。

将变量静态设置为true确实显示了它应该显示的内容。我试图onClick event修改我要更新的变量，并按预期工作。

将console.log()传递给collapsedMenuIsActive
<StyledNavBarList>将从toggleCollapsedMenu切换到false，并在单击true时反转

在此处，变量将与onClick事件一起切换。

<StyledNavBarBurger>

这是我设计的样式。

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>

我希望在触发onClick事件时，我正在更新的变量将更新export const StyledNavBarList = styled.ul` ... ${MEDIA.smallPhone` display: ${props => props.isActive ? 'block' : 'none'}; ... `} `;中的props.isActive值。

Answer 1

如果要基于变量触发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或被其他节点/元素包装。

Answer 2

您应该为此使用状态：

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组件，它将完成所需的操作。

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

2 个答案: