Javascript （React）如何将函数传递给封装在变量中的组件？

如果查看图像链接，可以找到两个常量变量signUpBtn和signInBtn。我将这两个变量传递给注册组件作为道具

问题是我有一个名为navigatePage的操作创建者（函数），我必须将它传递到两个常量变量中的SignupBtn组件中。然而，函数没有被正确地传递，我似乎无法理解它。请参考本手册中的代码。谢谢 从“React”导入React； 从“react redux”导入{connect}

从“/Signup”导入注册；
从“/SignupEmail”导入注册电子邮件；
从“/SignupBtn”导入SignupBtn；
从“/helpers”导入{signup，signin，signupEmail}；
从“../../../actions/Signup”导入{navigateSignUpPages}；
const SignUpRoot=（{currentPage，navigatePage}）=>{
常数signUpBtn=(
console.log（“单击”）}
/>
);
console.log（“测试”，signUpBtn）；
常数符号=(
);
返回(
{currentPage===“注册电子邮件”&&(
)}
{currentPage===“登录”&&(
)}
{currentPage===“注册”&&(
)}
);
};
常量mapStateToProps=状态=>({
当前页面：state.Signup.navigateSignupPage
});
const mapDispatchToProps=调度=>({
navigatePage:page=>dispatch（navigateSignUpPages（第页））
});
导出默认连接（mapStateToProps、mapDispatchToProps）（SignUplot）；

所提供的代码存在一些主要问题

您不应该内联if语句，而是应该创建一个组件来处理它

即：

const SomeComponent=（{someValue}）=>{
如果（someValue==1）返回
如果（someValue==2）返回
}

在你的情况下，你应该在你的地标中处理这个问题

其次，如果您使用的是您声称的React+Redux，则不需要传递currentPage变量，因为该变量已经作为prop通过React/Redux路由器提供

---

重组您处理问题的方式将大大简化事情，并将减少您看到的问题。

能否提供您编写的代码？您只提供了视图，没有提供后端代码。还可以直接添加有问题的代码片段，这样人们就可以复制并试用。图片不允许复制对不起！我用我的代码编辑了我的帖子是的，在创建

signUpBtn

或

signInBtn

时，你不应该让if语句内联，而应该创建一个组件来处理它。我不同意，有条件的JSX没有错。

import Signup from "./Signup";
import SignupEmail from "./SignupEmail";
import SignupBtn from "./SignupBtn";
import { signup, signin, signupEmail } from "./helpers";
import { navigateSignUpPages } from "../../../actions/Signup";

const SignUpRoot = ({ currentPage, navigatePage }) => {
    const signUpBtn = (
        <React.Fragment>
            <SignupBtn
                SignWith="Sign up with Email"
                onClick={() => console.log("clicked")}
            />
            <SignupBtn SignWith="Sign up with Github" />
            <SignupBtn SignWith="Sign up with Facebook" />
        </React.Fragment>
    );
    console.log("test", signUpBtn);

    const signInBtn = (
        <React.Fragment>
            <SignupBtn SignWith="Sign in with Email" />
            <SignupBtn SignWith="Sign in with Github" />
            <SignupBtn SignWith="Sign in with Facebook" />
            <SignupBtn SignWith="Sign in with Google" />
            <SignupBtn SignWith="Sign in with Twitter" />
        </React.Fragment>
    );
    return (
        <div className="signup-wrapper">
            {currentPage === "SignUpEmail" && (
                <SignupEmail
                    title={signupEmail["title"]}
                    text={signupEmail["text"]}
                    theme={signupEmail["theme"]}
                />
            )}
            {currentPage === "SignIn" && (
                <Signup
                    title={signin["title"]}
                    text={signin["text"]}
                    theme={signin["theme"]}
                    linkMsg={signin["linkMsg"]}
                    link={signin["link"]}
                    linkState={signin["linkState"]}
                    signBtn={signInBtn}
                />
            )}
            {currentPage === "SignUp" && (
                <Signup
                    title={signup["title"]}
                    text={signup["text"]}
                    theme={signup["theme"]}
                    linkMsg={signup["linkMsg"]}
                    link={signup["link"]}
                    linkState={signup["linkState"]}
                    signBtn={signUpBtn}
                />
            )}
        </div>
    );
};

const mapStateToProps = state => ({
    currentPage: state.Signup.navigateSignupPage
});

const mapDispatchToProps = dispatch => ({
    navigatePage: page => dispatch(navigateSignUpPages(page))
});

export default connect(mapStateToProps, mapDispatchToProps)(SignUpRoot);

const SomeComponent = ({ someValue }) => {
  if (someValue === 1) return <ComponentOne />
  if (someValue === 2) return <ComponentTwo />
}

<SomeComponent someValue=1 />