Question

我正在学习React。我在vanilla JS中有一个小函数，可以随机生成给定的图像。由于它是随机的，并没有保存到任何状态（故意），每个状态变化也会改变图像，这是我试图避免的。该图像将在<body>上用作内联样式，因此可以用作我的背景图像。

如果我在myBackground上设置了这个componentWillMount函数，它只在组件安装之前渲染一次，那么我就可以完成我需要的工作，但我不知道对于我需要什么在那里。

class homePage extends React.Component {
  constructor () {
    super()
    this.state = {}
  }

  get myBackground () {
    const imageArr = ['cat.jpg', 'dog.jpg', 'horse.jpg']
    const randomImg = imageArr[Math.floor(Math.random() * imageArr.length)]
    const bgImg = {backgroundImage: 'url(' + randomImg + ')'}

    return bgImg
  }

  componentWillMount () {
    this.myBackground // doesn't work
  }

  render () {

    // with the current status, below image is changed
    // whenever a given state is changed. It needs to be changed
    // only right before component is mounted
    return <body style={this.myBackground}>
    ...
  }
}

如何将this.myBackground附加到componentWillMount并且能够在渲染中使用它？请注意，不希望创建setState来处理此行为。

Answer 1

你在渲染中使用this.myBackground，这是一个getter函数。每次组件重新渲染时，它都会再次调用getter函数并为您提供另一个图像。

只需将您的getter函数名称更改为其他名称，并将其存储到您的实例属性中，或state中的componentWillMount。

class homePage extends React.Component {
  // Rename your getter function!
  get getNewBackground() {
    const imageArr = ['cat.jpg', 'dog.jpg', 'horse.jpg']
    const randomImg = imageArr[Math.floor(Math.random() * imageArr.length)]
    const bgImg = {backgroundImage: 'url(' + randomImg + ')'}

    return bgImg
  }

  componentWillMount() {
    this.myBackground = this.getNewBackground;
  }

  render() {
    return <body style={this.myBackground}>
  }
}

严肃地说，你不应该使用这样的getter函数，你的组件应该是这样的：

class HomePage extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      backgroundImage: this.getNewBackground(),
    };
  }

  getNewBackground() {
    const imageArr = ['cat.jpg', 'dog.jpg', 'horse.jpg'];
    const randomImg = imageArr[Math.floor(Math.random() * imageArr.length)];
    const bgImg = {backgroundImage: 'url(' + randomImg + ')'};

    return bgImg;
  }

  render() {
    return <body style={this.state.myBackground}>
  }
}

附加函数以用作componentWillMount的内联样式

1 个答案: