时间戳

首页 > 解决方案 > 在 ReactJs 中将函数作为道具传递的问题

javascript - 在 ReactJs 中将函数作为道具传递的问题

问题描述

class ReturnTempPassword extends React.Component {
  constructor(props) {
    super(props);

    console.log(JSON.stringify(this.props));

  }

  render() {
    return (
        <div>
            { /* change code below this line */ }
            <p>Your temporary password is: <strong>{}</strong></p>
            { /* change code above this line */ }
        </div>
    );
  }
};

class ResetPassword extends React.Component {
  constructor(props) {
    super(props);
    this.pwdGen = this.pwdGen.bind(this);
  }

  // returns a random string as password
  pwdGen(m){
    var m = m || 9, str="",  r = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';;
    for(var i=0; i<m; i++) {
      str+= r.charAt(Math.floor(Math.random()*r.length));
    }
    return str;
  }
  render() {
    return (
        <div>
          <h2>Reset Password</h2>
          <h3>We've generated a new temporary password for you.</h3>
          <h3>Please reset this password from your account settings ASAP.</h3>
          { /* change code below this line */ }
          <ReturnTempPassword data={"data"} pass={this.pwdGen} /> 
          { /* change code above this line */ } 
        </div>
    );
  }
};

我正在发送一个函数作为 aprop并希望在子组件中访问它ReturnTempPassword。但是data可以作为 prop 但不是pass. 不知道我做错了什么？

仅供参考，这是一个freecodecamp任务，我试图以自己的方式解决。任务链接在这里：

请帮我纠正错误。

标签： javascriptreactjsuser-interfaceweb-applicationsfunctional-programming

解决方案

更新由于其他人提供了解决方案，我可以提供我的:)

实际上，在任务中，他们不希望您创建随机密码文本。他们只是希望您将“文本”作为道具传递，命名为tempPassword. 你想在这里使用一个函数。这没关系，但如果它通过测试，我不会。

您可以通过两种方式使用此功能。

  1. 您可以将它作为道具传递给孩子。
  2. 您可以直接在父级中使用它。

你有什么特别的理由要在孩子身上使用吗？我想不是。

因此，您可以在父级中使用它，例如：

<ReturnTempPassword pass={this.pwdGen()} />

在孩子身上：

<p>Your temporary password is: <strong>{this.props.pass}</strong></p>

如您所见，因为您可以在不将函数传递给子组件的情况下执行此操作。此外，您不需要绑定该函数，因为它没有this在这里使用，也没有被回调调用。它只是一个简单的方法，也可以与您的课程完全分开。

我在下面提供了一个这样的例子。您不需要在此处将函数作为道具传递。这样，您可以在任何地方使用它。例如，您可以将此函数放在一个文件中，然后将其导出。当您需要它时，您可以轻松地将其导入任何地方。这个函数不需要属于类本身。

但是，如果您想将它作为道具传递，@mariamelior 的回答会显示您如何做到这一点。

// returns a random string as password
function pwdGen(m) {
  var m = m || 9,
    str = "",
    r = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  for (var i = 0; i < m; i++) {
    str += r.charAt(Math.floor(Math.random() * r.length));
  }
  return str;
}

class ReturnTempPassword extends React.Component {
  render() {
    return (
      <div>
        {/* change code below this line */}
        <p>
          Your temporary password is: <strong>{this.props.pass}</strong>
        </p>
        {/* change code above this line */}
      </div>
    );
  }
}

class ResetPassword extends React.Component {
  render() {
    return (
      <div>
        <h2>Reset Password</h2>
        <h3>We've generated a new temporary password for you.</h3>
        <h3>Please reset this password from your account settings ASAP.</h3>
        {/* change code below this line */}
        <ReturnTempPassword data={"data"} pass={pwdGen()} />
        {/* change code above this line */}
      </div>
    );
  }
}

ReactDOM.render(<ResetPassword />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

推荐阅读