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

Question

主题： 我正在编写一个登录系统。

语言或库： React (16.8)

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

登录系统.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;

欢迎.jsx

import React from 'react'

const Welcome = (props) => {

  return(

    <h2>WELCOME {props.uName}</h2>

  )

}

export default Welcome;

错误：需要赋值或函数调用，却看到了一个表达式 no-unused-expressions