如何从父级转到子级以及如何从子级返回到React.js中的父级组件 [英] How to go from parent to child and from child go back to parent component in React.js

问题描述

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

I want to create the next flow using react js. I have a list of products, and when I click on the list, I want to redirect to a single product form. If I press the delete button on this form, the product will be deleted from DB and the list will be displayed. I have the <List /> component and <Product /> component. Also I am using 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.

<Table /> is another component that displays a table with datas, and onClick on a row, it returns the ID for that product, and in <List /> component there is a goToProduct function that sets the state value for productId.

在<Product />中，产品详细信息显示在表单上，​​并且有一个删除按钮.在这里，我尝试将Browserify包含在<List />组件中，以执行类似的操作，如果我删除产品，请设置一些状态并render <List />.

In <Product /> the product details are displayed on a form, and there is a delete button. Here I've tried to include with Browserify the <List /> component, to do something similar, if I delete the product, set some state and render <List />.

function deleteProduct (){
    //do stuff for delete

   return <List />
}

如果我直接访问<Product />以获得新产品，那么一切都很完美，并且可以正常运行，但是如果我尝试单击列表并转到<Product />，则可以在控制台中找到它:

If I access directly <Product /> for a new product, everything is perfect and it works, but if I'm trying to click on the list and go to <Product /> I'm getting this in the console:

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");，则不会再出现此错误，但是，当然，我无法返回列表.

If I remove var List = require("components/Forms/productList/view.jsx"); I don't get anymore this error, but of course, I can't go back to the list.

如何使此流程如上所述工作?

How can I make this flow work as described above?

推荐答案

似乎您正在从未导出文件的文件中导入List组件(请共享您的view.jsx文件，以供其他人查看).确保正确导出List组件.类似于以下内容:

It seems you are importing your List component from a file that is not exporting it (please share your view.jsx file for others to see). Make sure you export your List component correctly. Something along the lines of:

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

然后将其导入:

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

这篇关于如何从父级转到子级以及如何从子级返回到React.js中的父级组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！