Javascript 如何在Reactjs中不相关的功能组件之间传递数据而不进行重复

因此，要达到pass data between two unrelated componentsinreact ，最好的方法通常是先处理lift the state up to a common ancestor个组件，然后再处理pass the necessary data down to the components个需要它的组件.

在您的例子中，您已经通过在App组件中定义状态并将其向下传递给CompA和CompB来开始执行此操作.

I found some minor issues in your implementation:个

在CompA中，您将定义一个新的州名称和一个新的setName函数.这是不必要的，因为您已经将它们作为props 从App组件传递.您应该使用传递的name和setName作为props ，而不是创建新props .

在CompB中，useEffect挂钩的使用不正确.您正在try 在组件挂载时设置名称，但它已经作为props 传递，并将在App中的状态更改时自动更新.

This should fix your App Component:个

import { useState } from 'react';
import CompA from "./CompA";
import CompB from "./CompB";
import "./styles.css";

function App() {
  const [name, setName] = useState(''); // Initialize with entpy string

  return (
    <div className="App">
      <CompA setName={setName} name={name} />
      <CompB name={name} />
    </div>
  );
}

export default App;

Component A:个

import React from 'react';

const CompA = ({ setName, name }) => {
  const AHandler = (e) => {
    e.preventDefault();
    // No need to do anything here unless you have other logic to implement
  };

  return (
    <div>
      <h5>Component A</h5>
      <div>{name}</div>
      <form onSubmit={AHandler}>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        <button type="submit">Component A</button>
      </form>
    </div>
  );
};

export default CompA;

Lastly comp B:个

import React from 'react';

const CompB = ({ name }) => {
  return (
    <div>
      <h5>The user given input should display in Component B: {name}</h5>
    </div>
  );
};

export default CompB;

希望这能有所帮助