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可以作为prop而不是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”的“文字”作为道具。您想在这里使用一个功能。可以，但是如果通过测试，我就不知道。

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

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

您要在孩子中使用任何特定原因吗？我想，不是。

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

<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>

传递功能作为ReactJs中的道具的问题

2 个答案: