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

Question

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>
    );
  }
}; 

我正在以prop 的形式发送一个函数，并希望在子组件ReturnTempPassword 中访问它。但是data 可以作为道具使用，而不是pass。不知道我做错了什么？

仅供参考，这是一个 freecodecamp 任务，我正在尝试以自己的方式解决。 任务链接是here:

请帮我改正错误。

Answer 1

你做的一切都是正确的 添加调用你的函数

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>{this.props.pass(5)}</strong></p>
        { /* change code above this line */ }
    </div>
);
 }
 };

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

 // 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>
  );
}

};

这个代码 this.pwdGen = this.pwdGen.bind(this);不需要

Answer 2

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

实际上，在任务中，他们不希望您创建随机密码文本。他们只是希望你传递一个名为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>