Question

我有一个组件：

class Swatch1 extends Component {
  componentWillMount() {
    console.log("MERCHANT");
    console.log(this.props.merchant);
    }

lightestColor(colors) {
// Color calculations that set highestColor
console.log(highestColor);
}

  render() { 

    return (

  <ColorExtractor
    src={this.props.merchant.merchant.coverPhoto}
    getColors={colors => this.lightestColor(colors)}
  />

);
}
}

// mapStateToProps and mapDispatchToProps here

// Redux connection
const Swatch = connect(mapStateToProps, mapDispatchToProps)(Swatch1);

现在，每次渲染另一个组件时都会调用此组件，对于我当前的用例，应该将其渲染三次...

其他组件：

class Card extends Component {

  render() {

    return (

    <div className="card titlecard" style={{backgroundImage: `url(${this.props.merchant.merchant.coverPhoto})`}}>
<Swatch merchant={this.props.merchant.merchant} />
....

CardRow组件的全部内容，包括''对象的添加方式。

class CardRow extends Component {

list = []

componentWillMount() {
  this.list.push(<Card merchant={this.props.merchant} />)
}

    render() {

      return (
        <div className="App">

          <ScrollMenu
            data={this.list}
          />
        </div>
      );
    }
  }

现在，这将创建三个<CardRow />对象。

因此，从理论上讲，每次渲染CardRow时，都应该渲染Card（以及Swatch1），这似乎与Swatch1中的componentWillMount（）一致，但与lightestColor（）不一致。

为什么多次正确调用componentWillMount（）而不是lightestColor（）？

不是每次Swatch1组件渲染时都调用它们（应该是3次吗？）

组件安装几次，但仅渲染一次

0 个答案: