React组件的内联样式无法生效

Question

我创建了Carousel组件，它返回一个Carousel盒子的集合，在返回之前，我将样式属性应用于每个返回的div，但是样式不起作用。我该怎么做才能修复它？

如果我在主要div内创建另一个div，并将外部div的内容包装到内部div中，然后将样式属性应用于内部div而不是外部div，则一切都可以正常工作。

const Carousel = (props)=>{
 return (
         <Slider {...settings}>
           { props.sectionDetails?
            props.sectionDetails.map(
             (TypeBox)=>{
               return (<div key={TypeBox.id} style={{background: 
                        TypeBox.background_color}}>
                        <h3>{TypeBox.title}</h3>
                        <p>{TypeBox.description}</p>
                      </div>
                      );
             }):"" }
        </Slider>
        );
}

我只想要一个div，并且样式应该与此一起工作，我不想创建另一个嵌套的div。

- B4BIPIN

---

你确定 Typebox 有 background_color 属性吗？因为你的语法是正确的。 - Sagi Rika

似乎TypeBox没有background_color属性，请您再检查一下。 - Joseph

@SagiRika 哪个语法部分有误？ - Maheer Ali

style={{background: TypeBox.background_color}} 是正确的语法。我99%确定 background_color 不是 TypeBox 的属性。 - Sagi Rika

@SagiRika，我知道这是正确的方法，但是用这种方式一切都正常工作。 返回（<div key={TypeBox.id}><div style={{TypeBox.background_color}} <h3>{TypeBox.title}</h3><p>{TypeBox.description}</p></div></div>）; - B4BIPIN

Answer 1

在React中，内联样式与JSON类似。

1. style元素必须使用camelCase编写。
2. style元素的值必须用引号包裹。

我不知道它是否适用于你的代码，但无论如何，请尝试这种方式，这是调用内联样式的正确方法：

style={{backgroundColor: "TypeBox.background_color"}}

或者您可以尝试将您的样式用反引号括起来，像这样：

style={{backgroundColor: `${TypeBox.background_color}`}}

- Robert Hovhannisyan

---

"TypeBox.background_color" 会被解析为字符串。我在 CodePen 上尝试了这段代码，它运行得很好。请问您的 sectionDetails 属性中是否有 background_color 属性？谢谢。 - wing

好的，但在我的情况下，TypeBox.background_color的值是动态获取的，因此应该写成 <div style={{background:TypeBox.background_color}}> - B4BIPIN

我担心在这种情况下，您必须找到其他设置样式的方法。为什么不想在外部CSS文件中完成，并使用className或ID进行调用呢？ - Robert Hovhannisyan

因为在我的情况下，样式的值是从后端动态获取的，如果它是静态的，那么我该如何在ReactJS中改变它们呢？ - B4BIPIN

你尝试使用状态来实现它，比如我们有一个名为bg的状态，其值为TypeBox.background_color，然后在内联样式中写入style={{backgroundColor : ${this.state.bg}}}或类似的内容。但是要将这个 ----> ${this.state.bg} -- 包裹在反引号中。 - Robert Hovhannisyan

或者您可以使用反引号来编写您的版本，就像这样 style={{backgroundColor: "反引号" ${TypeBox.background_color} "反引号"}} - Robert Hovhannisyan

Answer 2

正确的解决方案是 style={{ backgroundColor: TypeBox.background_color }}。

- gaspar

Answer 3

对于那些遇到类似问题的人，如果你正在使用ReactMUI，我有一个可行的解决方案。

用<Box>组件替换你的div属性（这是MUI的div容器）

我试图调整面板大小到特定的宽度，基于祖先元素。

我有一个孙子元素（如下），我想要动态更新为以像素为单位计算的宽度。

                  <Box 
                    className='panel panel-1'
                    ref={refPanel_1}
                    sx={formWidthStyling}
                  >

在页面加载时，我使用另一个useRef（如下所示）获取我的祖父宽度

              <div className='form-inputs-container'
                ref={formRef}
              >

我随后使用 useEffect更新了我的 formWidthStyling。

  const [formWidthStyling, setFormWidth] = useState<SxProps>({});

  useEffect(()=>{
    console.log("FORM WIDTH ADJUSTED TO: ", formRef?.current!.offsetWidth )
    setFormWidthStyling((currState:any) => currState = {width: `${formRef?.current!.offsetWidth}px !important`});
  }, [formRef]);

这样，我的面板根据其祖先的宽度进行调整，而祖先的宽度是通过百分比视口宽度动态定义的。

我猜测，带有样式的属性没有被触发重新渲染，以使用您想要的最新样式背景，因此您需要动态设置状态以传递到内联样式中。

希望这可以帮助您。

- RJA