Question

如果Media的backgroundColour设置为“ red”，我想将redShadowMediaStyle应用于Media。有人知道我该怎么做吗？

使用媒体的反应组件：

import numpy as np
img_rows = 8
img_cols = 6

#Expand problem to N = 2 images
N = 2
# Initialize N = 2 images to pixels of all zero
# We do this twice to compare two different implementations
img_set1 = np.zeros(shape=(N, img_rows, img_cols), dtype='float32')
img_set2 = np.zeros(shape=(N, img_rows, img_cols), dtype='float32')
# I have a numpy array of shape (N, img_cols)
# Each row of the array is for each of my N images
# Each value in each row of the array represents the row index for which I want to set the
#   pixel value of the image in that respective column
row_indices = np.array([4, 2, 7, 0, 3, 6, 5, 0, 2, 6, 3, 3]). reshape(N, img_cols)
# Update the image_set1 data structure using a for loop
for i in range(N):
    # Initialize single image to all zeros
    temp_img = np.zeros(shape=(img_rows, img_cols), dtype='float32')
    temp_img[row_indices[i], np.arange(row_indices.shape[1])] = 1.0
    img_set1[i] = temp_img

# Update the image_set2 data structure without for loop using more advanced indexing
img_set2[np.arange(N), row_indices, np.arange(row_indices.shape[1])] = 1.0
# Check to verify these are equivalent
print(sum(sum(img_set1 == img_set2)) == N * img_rows * img_cols)

媒体组件：

<Media
  backgroundColour={"red"}
/>

我认为问题在于导出默认表达式无法访问Media类中的背景色。

Answer 1

您非常接近，您只需要一个插页式组件，就可以根据backgroundColour道具的当前值进行逻辑处理。尝试类似的东西：

export default function MediaWrapper({ backgroundColour }) {
    if (backgroundColour === "red") {
        return withStyles(redShadowMediaStyle)(Media)
    }
    return withStyles(mediaStyle)(Media));
}

Answer 2

最后我做了以下事情： 1）在mediaStyle中创建了一个“红色” css类（而不是我最初拥有的类，它是一个单独的CSS文件redShadowMediaStyle） 2）编辑的媒体具有：如果（props.backgroundColour ==“ red”）返回否则返回

基于道具价值的有条件出口

2 个答案: