Question

我只是想知道在有条件地渲染组件时如何避免重复此代码。

到目前为止，我拥有的是一个连接到redux的导航栏组件，如果它的状态为（是否为isAuth），它将使用logout（）呈现div，否则将使用login（）呈现div。

现在，这种方法不是很好，并且是重复性的。我遇到过这个https://blog.hackages.io/conditionally-wrap-an-element-in-react-a8b9a47fab2，基本上可以让您有条件地渲染组件而无需复制代码，但是我无法理解。抱歉，我现在正在学习做出反应。

如果您请告诉我如何使用此方法，或者是否有其他可以尝试的方法会很有帮助

谢谢

function Navbar({ isAuth, logOut }) {

            if(isAuth) {
                return(
                <div className="navbar">
                    <a> link A</a>
                    <a> link B</a>
                    <a> link C</a>
                    <a> link D</a>
                    <button onClick={() => logOut()} > Logout </button>
                </div>
            )
            }

            return (
                <div className="navbar">
                <a> link A</a>
                <a> link B</a>
                <a> link C</a>
                <a> link D</a>
                <button> Login  </button>
            </div>
            )
    }
    const mapStateToProps = ({ login }) => {
      return {
        isAuth: login.isAuthenticated
      };
    };
    export default connect(
      mapStateToProps,
      { logOut }
    )(Navbar);

Answer 1

只需使按钮呈现条件；

function Navbar({ isAuth, logOut }) {

                return(
                <div className="navbar">
                    <a> link A</a>
                    <a> link B</a>
                    <a> link C</a>
                    <a> link D</a>
                    {isAuth ? <button onClick={() => logOut()} > Logout </button> : <button> Login  </button>}
                </div>);
            }
    }
    const mapStateToProps = ({ login }) => {
      return {
        isAuth: login.isAuthenticated
      };
    };
    export default connect(
      mapStateToProps,
      { logOut }
    )(Navbar);

您可以将基本条件放在大括号-{}中的渲染/返回中。基本上，如果isAuth是真实的渲染注销，否则登录。

我如何有条件地包装此React组件

1 个答案: