子组件如何从两个独立的父组件获取多个道具/数据

Question

在一个组件中，为什么我不能从不同的组件接收两个/多个道具？

我收到此错误：

TypeError: props.name 不是函数。

我做错了什么？

这是我尝试的方法-

function Welcome() {
  const [searchString, setString] = useState('');
  return (
    <div className='App'>
      <Header name={searchString} />
    </div>
  );
}

function Home() {
const [numbers,setNumbers] =  useState('');
retrun(
<Header moneyAmount={numbers} />
)
}

function Header(props) {
return(
<div>
{props.name}
{props.moneyAmount}
</div>
)
}

所有人都尝试这种方式或function Header({name, moneyAmount}){} 字段。

createContext 或 useContext 有办法吗？
我尝试使用useContext，但我认为它与props 发生冲突，仍然报错。

Answer 1

你有 3 个组件：Welcome、Home 和 Header

Welcome 正在使用 Header 组件并向其传递一个 name 属性，因此它只会呈现您传递的名称（您提供了错误的变量，应该是 name={searchString} 而不是 name={setString}）。

Home 也使用了 Header 组件并传递了一个 moneyAmount 属性， 所以它只会渲染 moneyAmount 变量。

Welcome 和 Home 没有关系，因此它们中的 Header 组件不知道从另一个传递的 props。如果你想传递多个变量，你必须像这样直接传递给组件：

function Home(props) {
  const [numbers,setNumbers] =  useState('');
  return (
    <Header moneyAmount={numbers} name={prop.searchString} />
  )
}

如果你想将数据从 2 个不同的组件传递给一个子组件，你可以这样做：

function Welcome() {
  const [searchString, setString] = useState('');
  return (
    <div className='App'>
      <Home name={searchString} />
    </div>
  );
}

function Home(props) {
  const [numbers,setNumbers] =  useState('');
  return (
    <Header moneyAmount={numbers} name={props.name} />
  )
}

function Header(props) {
  return(
    <div>
      {props.name}
      {props.moneyAmount}
    </div>
  )
}