Question

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

render的{{1}}功能

<List />

if (this.state.productId) { return <Product productId={this.state.productId}/> } else { return ( <Table datas = {data} changeCallback={this._goToProduct} /> ) }是显示包含数据的表的另一个组件，并且行上有<Table />，它返回该产品的ID，而在onClick组件中有{{1}设置<List />的状态值的函数。

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

render

如果我直接访问<List />新产品，一切都很完美且有效，但如果我想点击列表然后转到function deleteProduct (){ //do stuff for delete return <List /> }我会在控制台：

<Product />

如果我删除<Product />我不会再收到此错误，但当然，我无法返回列表。

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

Answer 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';

如何从父母到孩子以及从孩子回到React.js中的父组件

1 个答案: