Question

我正在编写以下redux组件（哑）

const TopMenuComponent = () => (
    <div className={styles.topMenuIndex}>
        <header role="banner">
            <nav role='navigation'>
                <ul>
                    <li className={styles.expando}><a href="#1">☰</a></li>
                    <li><a href="#1">Home</a></li>
                    <li><a href="#2">About</a></li>                        
                </ul>
            </nav>
        </header>
    </div>
);

现在，在☰链接的click事件中，我想编写一些代码来执行某些功能。我有两个问题围绕这个

是否可以在不使用上述代码从React.Component类派生此内容的情况下执行此操作。我担心的是，这是一个愚蠢的组件，如果我们从React.Component派生出来，那么我们就会为此添加更多智能。
此扩展点击是否会触发redux商店的阶段更改？这只是一大堆链接的简单扩展，而且都是

Answer 1

如果你想让它成为一个愚蠢的组件，那么你可以传入一个属性，例如isOpen，它定义菜单是否展开，以及一个函数，例如handleClick，应该在按钮点击时调用。这样，状态可以由父组件管理。

现在，无论您是在父组件的内部状态还是在您的redux存储中管理此状态，都完全取决于您。如果需要远程打开和关闭菜单，则应选择redux。

Answer 2

有两种方法可以在不影响redux商店的情况下实现您的目标

首先，将函数作为父组件中组件的prop，然后调用此onClick

const TopMenuComponent = (props) => {

    return (
        <div className={styles.topMenuIndex}>
            <header role="banner">
                <nav role='navigation'>
                    <ul>
                        <li className={styles.expando} onClick={props.myhandler}><a href="#1">☰</a></li>
                        <li><a href="#1">Home</a></li>
                        <li><a href="#2">About</a></li>                        
                    </ul>
                </nav>
            </header>
        </div>
      )
    };

第二种方法是在组件中定义一个onClick处理程序，如

const TopMenuComponent = () => {

const myHandler = (e) => {console.log('clicked'); // some other code}
return (
    <div className={styles.topMenuIndex}>
        <header role="banner">
            <nav role='navigation'>
                <ul>
                    <li className={styles.expando} onClick={myhandler}><a href="#1">☰</a></li>
                    <li><a href="#1">Home</a></li>
                    <li><a href="#2">About</a></li>                        
                </ul>
            </nav>
        </header>
    </div>
  )
};

Redux组件，我可以在不使用类

2 个答案: