Question

那么我想在另一个组件中使用一种方法，为此，我找到了一种通过组合的方法。

这就是我为此所做的

file1.js

import ProductList from '../../views/Products/ProductList';

class CloseableTab extends Component {
    constructor() {
        super();
        this.tpItem = () => {
            console.log("hello, item clicked");
        };
    }
    render() {
        return (
            <div>
                <ProductList
                   itemChange={this.tpItem} />
            </div>
        );
    }
}

export default CloseableTab;

然后在productList中我想调用＆＃34; tpItem＆＃34;通过在prop中调用itemChange的方法。虽然在那之前我试图安装“道具”。产品清单。所以，它在控制台中显示了我的null对象。为此，我使用了以下代码：

ProductList.js

export default class ProductList extends Component {

constructor() {
        super();
};

render() {
 console.log(this.props);

  return { }
}
}

所以，这给了我控制台中的null对象。

感谢您的帮助，谢谢。

Answer 1

您是否启用了构造函数props？

只需在构造函数中传递props参数

 constructor(props) {
    super(props)
  }

在安装React组件之前，会调用它的构造函数。在实现React.Component子类的构造函数时，您应该在任何其他声明之前调用super（props）。除此以外， this.props将在构造函数中未定义，这可能导致错误。

Answer 2

在组件的构造函数中定义函数并不理想，您可以在构造函数之外声明它们并将它们传递下来，同样，在ProductList中，您试图渲染一个不受支持的对象。如果您不想使用return null返回任何内容。

下面的代码按预期工作。

class CloseableTab extends Component {
  constructor() {
    super();
    this.tpItem = () => {
      console.log("hello, item clicked");
    };
  }
  render() {
    console.log(this.tpItem);
    return (
      <div>
        <ProductList
          itemChange={this.tpItem} />
      </div>
    );
  }
}

class ProductList extends Component {

  render() {
    console.log(this.props);

    return null
  }
}

但是你必须把它写成

class CloseableTab extends Component {
  tpItem = () => {
      console.log("hello, item clicked");
  };
  render() {
    console.log(this.tpItem);
    return (
      <div>
        <ProductList
          itemChange={this.tpItem} />
      </div>
    );
  }
}

<强> Working sandbox

如何在ReactJs中使用组合

2 个答案: