Представленное свойство не будет обновляться после возникновения события 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, переменная, которую я обновляю, обновит значение props.isActive внутри моего styled component.

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, прочитайте официальные документы .Обратите внимание, что 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, он должен сделать то, что вам нужно.