Question

主题：：我正在为登录系统编写代码。

语言或库：React（16.8）

问题：我有一个名为LoginControl的组件。在此组件内，我想访问另一个组件（渲染之外）。然后，我想在道具的帮助下将用户名发送到其他组件。

LoginSystem.jsx

import React from 'react';
import Welcome from "./Welcome"

class LoginControl extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      users: [
        { username:"code", password:"blogger" },
        { username:"true", password:"codes" },
        { username:"furkan", password:"gulsen" }
      ]
    }
  }

  Control = () => {
    var username = document.getElementById("username");
    var password = document.getElementById("password");

    this.state.users.map( (user) => {
      if(user.username == username.value && user.password == password.value){
        <Welcome uName={user.username} /> // problem
        // props --> Welcome
      }
    })
  };

  render(){
    return(
      <div>
      <button className="btn btn-success" onClick={this.Control}>Sign In</button>
      </div>
    )
  }
}

export default LoginControl;

Welcome.jsx

import React from 'react'

const Welcome = (props) => {
  return(
    <h2>WELCOME {props.uName}</h2>
  )
}

export default Welcome;

错误：：期望进行赋值或函数调用，而是看到了表达式no-unused-expressions

Answer 1

对不起，但这设计不正确。我建议备份并慢慢进行。如果您希望看到道具进入“欢迎”并显示在LoginControl中，请尝试以下操作。

请注意，Radu Nemerenco是正确的，您没有从Control函数返回任何内容。基于上述设计，我建议在React Login上找到Youtube视频或从Udemy.com购买React课程，它们很棒而且很便宜。

import React from 'react'
import Welcome from "./Welcome"

class LoginControl extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      users: [
        { username:"code", password:"blogger" },
        { username:"true", password:"codes" },
        { username:"furkan", password:"gulsen" }
      ]
    }
  }

  Control = () => {
    return this.state.users.map( (user) =>  <Welcome uName={user.username} /> )
  }

  render(){

    return(
      <div>
        {this.Control()}
      </div>
    )
  }
}

export default LoginControl

如何将道具从一个组件发送到渲染之外的另一个组件？

1 个答案: