Question

我有一个父类组件（Dashboard.jsx），在此组件中，我将其称为子组件（AddExpense.jsx）。

<ListGroup.Item>
  <Link to="/expenses/add-expense">Add expense</Link>
</ListGroup.Item>

  ...
  ...

<Card.Header id="content-header">Content</Card.Header>
<Card.Body>
  <Switch>
    <Route path="/expenses/add-expense" component={AddExpense} />
  </Switch>
</Card.Body>

我想从ExpenseController（laravel）获取AddExpense的标题，当我单击“ / expenses / add-expense”链接时，“内容”（仪表板中的标题）更改为来自Expense控制器的标题。

Answer 1

“数据减少，操作增加”。

您应该将回调传递给AddExpense组件道具。

<AddExpense onUpdateHeader={
  (newHeader) => {
    this.setState({contentHeader: newHeader});
  }
}>

在AddExpense中，您需要在提及的点击后使用适当的参数（无论您想发送给父组件的什么）来调用该回调。

<Link href="/expenses/add-expense" 
  onClick={ () => { 
      this.props.onUpdateHeader(headerToSendUp);
    } 
  }
>Link text...</Link>

Answer 2

@sEver提供了最简单的解决方案来实现您所描述的内容。如果您想创建一个稍微参与一些的网站（或者如果您想确保多个组件都具有最新信息，而不必在React中上下钻取信息），则可能需要研究一下较旧的Flux库或较新的Redux库。我只用过Flux，所以我只讲Flux的工作原理。

您的组件外部存在“商店”。这些存储区包含状态，通常使用ID号跟踪状态是有意义的。例如，如果您要存储对象

{name: 'foo', text:'bar',value:'baz'}

您将其存储在商店中的ID号下。

state = {'1' : {name: 'foo', text:'bar',value:'baz',id:'1'}}

为了保持流程的清洁，您可以拥有任意数量的商店，但是商店必须将其数据发送到同一组件，然后组件将这些数据作为道具通过子组件传递。

如果您需要修改一个组件中的数据，然后将其发送到并行组件或多个级别的组件，则此功能特别有用。这不是唯一的解决方案，如果您仅尝试将信息发送到单个级别，则回调函数可能是最好的解决方案。

如何将状态从子组件提升到父组件

2 个答案: