Question

我有简单的React应用程序，此应用程序的某些组件需要动态样式。是否允许使用方法有其他一些推荐的方法来做到这一点？ Everythings工作正常，但我不想使用一些反模式。

e.g。

class MyComponent extends React.Component {
  // ...
  block_style() {
   if (!!this.state.folder.image) {
     return {"backgroundImage": "url(" + this.state.folder.image + ")";
   } else {
     return {"backgroundColor": "orange"};
   }
  }

  render() {
    return (
      <div style={this.block_style.bind(this)()}>
        // ...
      </div>
    )
  }
}

Answer 1

这种方法存在三个问题，使它们不是一个很好的选择。

首先，您要绑定remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10); add_action( 'woocommerce_product_thumbnails', 'woocommerce_output_product_data_tabs', 10);函数中的函数。问题是当你render()时，它实际上返回一个新函数。由于您是在bind()函数中创建的，因此每次渲染时，它都会看到新函数并始终重新渲染，从而创建了大量不必要的渲染。你应该总是绑定在render()或其他只会发生一次的其他地方。

第二个问题就是没有必要constructor()使用它。您只需要在不立即调用它（例如将其传递给事件处理程序）时绑定，其中上下文可能会丢失。如果你马上调用它，那么你就有了上下文，没有必要绑定。

第三种类似于第一种。即使您修复bind()问题，因为该函数返回一个新对象，您将遇到与第一个类似的问题。由于它始终是一个新对象（即使它包含相同的数据），它每次都会触发React重新渲染，从而产生大量不必要的渲染。

相反，更好的方法是在更新bind的同时更新state并创建和存储样式：

state.folder

然后，您只需在渲染中使用该样式：

someFuncWhereYouUpdateFolder() {
  const folder = getFolder();
  this.setState({
    folder,
    style: folder.image 
      ? { backgroundImage: `url(${folder.image})` } 
      : { backgroundColor: 'orange' }
  });
}

有关不在render() { return ( <div style={ this.state.style }> { /* stuff */ } </div> ); }中创建对象的详情，请参阅this（特别是＃6）和this等文章。

Answer 2

内联样式的一种常见做法是创建根据状态切换的对象。

this.state = {
  folderImage: null
}

render() {
  let folderImage = {};

  if (this.state.folderImage) {
    folderImage.background = `url($this.state.folderImage)`
  } else {
    folderImage.background = "orange"
  }

  return (
    <div style={folderImage}>
    </div>
  )
}

我也不认为以你的方式做到这一点是错的，但我还没有看到它。如果您对使用样式功能的方式更加满意，那么请尝试一下，看看您是否喜欢它。

我通常使用函数进行功能和数据处理以及用于样式设置的对象。一旦您开始处理大型项目，就可以更容易地将两者分开。

PS。在您的代码的第4行，您需要检查!! - 别这么做。

Answer 3

我认为你所做的很好，可以照我做的。但是，我会做这样的事情。

<div className="some-class-name" style={!!this.state.folder.image? {backgroundImage: this.state.folder.image} : {}}>

＆＃34;一些类名＆＃34; name将具有css属性。现在，只有!! this.state.folder.image条件匹配，您才能覆盖那些内联样式绝对必要的属性。

反应 - 使用方法造型是一种很好的做法

3 个答案: