Reactjs中如何将状态变量从一个组件导出到另一个组件？

Question

//SignIn.js
function SignIn() {
   const [username, setUsername] = useState('Mickey')
   if (//condition if true):
      setUsername('Mickey Mouse');
   return(
      <div><h1>{username}</h1></div>
   )
}
export default SignIn;

//Target.js
function Target() {
    return(
      <div><h1>Hello</h1></div>
   )
}

举个例子，假设我有两个组件 SignIn.js 和 Target.js （包含所有必要的导入）。我想将用户名状态变量从 SignIn.js 传递/导出/传输到 Target.js。我该怎么做？

Answer 1

要在 React 中将

username

状态变量从

SignIn.j

s 传递到

Target.js

，您可以使用 props。这是一个例子

在

SignIn.js

中，您需要导入

Target

并将

username

作为 prop 传递：

import React, { useState } from 'react';
import Target from './Target';

function SignIn() {
   const [username, setUsername] = useState('Mickey');

   if (//condition if true) {
      setUsername('Mickey Mouse');
   }

   return (
      <div>
         <h1>{username}</h1>
         <Target username={username} />
      </div>
   )
}

export default SignIn;

在

Target.js

中，你可以像这样收到

username

道具：

import React from 'react';

function Target(props) {
   const { username } = props;

   return (
      <div>
         <h1>Hello, {username}</h1>
      </div>
   )
}

export default Target;

现在，当您渲染

SignIn

组件时，它也会渲染

Target

组件，并将

username

状态变量作为 prop 传递。在

Target.js

中，您可以使用

username

访问

props.username

。

这样，如果

Target

中的条件为 true，则

SignIn.js

组件将显示“Hello, Mickey Mouse”。