如何在 React.js 中从父组件到子组件以及从子组件返回父组件答案

【问题标题】：How to go from parent to child and from child go back to parent component in React.js如何在 React.js 中从父组件到子组件以及从子组件返回父组件
【发布时间】：2015-11-30 22:40:48
【问题描述】：

我想使用 react js 创建下一个流程。我有一个产品列表，当我单击列表时，我想重定向到单个产品表单。如果我按下此表单上的删除按钮，产品将从数据库中删除并显示列表。我有<List /> 组件和<Product /> 组件。我也在使用 Browserify。

在<List />的render函数中我有

if (this.state.productId) {
    return <Product productId={this.state.productId}/>
} else {
    return (
       <Table datas = {data}
              changeCallback={this._goToProduct}
       />
    )
}

<Table /> 是另一个显示包含数据的表格的组件，onClick 在一行上，它返回该产品的 ID，在 <List /> 组件中有一个 goToProduct 函数用于设置状态值为productId。

在<Product />中，产品详细信息显示在一个表单上，并且有一个删除按钮。在这里，我尝试在 Browserify 中包含 <List /> 组件，以做类似的事情，如果我删除产品，设置一些状态和 render <List />。

function deleteProduct (){
    //do stuff for delete

   return <List />
}

如果我直接访问 <Product /> 以获取新产品，一切都很完美并且可以正常工作，但如果我尝试单击列表并转到 <Product />，我会在控制台中得到这个：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `exports`. react.js:20250
  warning @ react.js:20728
  ReactElementValidator.createElement @ react.js:9853
  t.exports.React.createClass.render @ bundle.js:1ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ react.js:6330
  ReactCompositeComponentMixin._renderValidatedComponent @ react.js:6350
  wrapper @ react.js:12868
  ReactCompositeComponentMixin._updateRenderedComponent @ react.js:6303
  ReactCompositeComponentMixin._performComponentUpdate @ react.js:6287
  ReactCompositeComponentMixin.updateComponent @ react.js:6216
  wrapper @ react.js:12868
  ReactCompositeComponentMixin.performUpdateIfNecessary @ react.js:6164
  ReactReconciler.performUpdateIfNecessary @ react.js:13667
  runBatchedUpdates @ react.js:15356
  Mixin.perform @ react.js:17245
  Mixin.perform @ react.js:17245
  assign.perform @ react.js:15313
  flushBatchedUpdates @ react.js:15374
  wrapper @ react.js:12868
  Mixin.closeAll @ react.js:17311
  Mixin.perform @ react.js:17258
  ReactDefaultBatchingStrategy.batchedUpdates @ react.js:8842
  batchedUpdates @ react.js:15321
  ReactEventListener.dispatchEvent @ react.js:10336

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `exports`.

如果我删除 var List = require("components/Forms/productList/view.jsx");，我不会再收到此错误，但当然，我无法返回列表。

我怎样才能使这个流程如上所述工作？

【问题讨论】：

标签： reactjs flowtype

【解决方案1】：

您似乎正在从未导出的文件中导入List 组件（请分享您的view.jsx 文件以供其他人查看）。确保正确导出 List 组件。大致如下：

// list.jsx
export default class List extends Component {
  render() {
    return <ul>
      <li>Item 1</li>
    </ul>;
  }
}

然后导入：

// app.jsx
import List from './components/list';

【讨论】：