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

Question

主题： 我正在编写一个登录系统。语言或库： React (16.8)问题：我有一个名为 LoginControl 的组件。在这个组件中，我想访问另一个组件（在渲染之外）。然后我想在 props 的帮助下将用户名发送到另一个组件。登录系统.jsximport 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;欢迎.jsximport React from 'react'const Welcome = (props) => {  return(    <h2>WELCOME {props.uName}</h2>  )}export default Welcome;错误：需要赋值或函数调用，却看到了一个表达式 no-unused-expressions