javascript - 如何在渲染之外将 Prop 从一个组件发送到另一个组件？

Question

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

语言或库: React (16.8)

问题:我有一个名为 LoginControl 的组件。在这个组件中，我想访问另一个组件(渲染之外)。然后我想借助 props 将用户名发送到其他组件。

<小时/>

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;

Error: Expected an assignment or function call and instead saw an expression no-unused-expressions

Answer 1

抱歉，这设计不正确。 我建议后退并放慢速度。 如果您希望看到您的 Prop 进入欢迎并显示在 LoginControl 中，请尝试以下操作。

请注意，Radu Nemerenco 是正确的，您没有从控制函数中返回任何内容。 基于上面的设计，我建议在 React Login 上查找 Youtube 视频或从 Udemy.com 购买 React 类(class)，它们很棒而且相当便宜。

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