Встроенный стиль компонента React не работает

ProgramBox

Встроенный стиль компонента React не работает

Post author:admin
Запись опубликована:2 мая, 2023
Post category:Вопросы по программированию

#javascript #reactjs

Вопрос:

Я создал компонент Carousel, он возвращает коллекцию блоков carousel, перед его возвратом я применяю свойство style к каждому возвращаемому div, но стиль не работает. Что я должен сделать, чтобы это исправить?

Если я создам другой div внутри основного div и перенесу содержимое внешнего div во внутренний div и применю свойство style к внутреннему 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.

1. Вы уверены, что Typebox имеет свойство background_color? Потому что ваш синтаксис правильный.

2. похоже, что TypeBox не имеет свойства background_color, не могли бы вы, пожалуйста, перепроверить это

3. @SagiRika Какая часть синтаксиса неверна?

4. style={{background: TypeBox.background_color}} это правильный синтаксис. Я на 99% уверен, что это background_color просто не свойство TypeBox .

5. @SagiRika, я знаю, что это правильный путь, но таким образом все работает нормально. возврат (<клавиша div={TypeBox.id }><стиль div={{TypeBox.background_color}} <h3>{TypeBox.title}</h3><p>{TypeBox.description}</p></div></div>);

Ответ №1:

Встроенные стили в React аналогичны JSON.

Элемент style должен быть записан вместе с camelCase.
Значение элемента style должно быть заключено в кавычки.

Я не знаю, будет ли это работать с вашим кодом, но все равно попробуйте это, это правильный способ вызвать встроенный стиль:

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

Или вы можете попытаться обернуть свой стиль в обратные ссылки следующим образом:

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

1. «TypeBox.background_color» будет проанализирован как строка. Я попробовал код на codepen. Он работает нормально. Можете ли вы проверить, есть ли свойство background_color в вашем реквизите sectionDetails.

2. хорошо, но в моем случае значение TypeBox.background_color поступает динамически, поэтому оно должно быть записано как ` <div style={{background:TypeBox.background_color}}> `

3. Боюсь, в этом случае вам придется найти другой способ установки стилей. Почему вы не хотите делать это во внешнем файле css и вызывать его с className или ID?

4. Поскольку значение style в моем случае поступает динамически из серверной части, если оно было бы статичным, то как я должен был изменить их в ReactJS?

5. Вы пытались сделать это с помощью state, скажем, у нас есть state bg и значение равно TypeBox.background_color , и во встроенном стиле напишите style={{backgroundColor : ${this.state.bg}}} или что-то в этом роде. Но оберните это —-> ${this.state.bg } — в обратные ссылки

Ответ №2:

Правильным решением является style={{ backgroundColor: TypeBox.background_color }} .

Ответ №3:

Для тех, кто пришел сюда с подобными проблемами, И если вы используете ReactMUI. У меня есть рабочее решение.

Замените свой div атрибут на <Box> component (который является контейнером MUI div)

Я пытался изменить размер панелей до определенной ширины на основе элемента grandparent.

У меня есть элемент grandchild (ниже) Я хочу динамически обновлять с вычисленной шириной в пикселях.

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

при загрузке страницы я беру ширину моего дедушки и бабушки, используя другой useRef (см. ниже)

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

Затем я обновляю свой formWidthStyling , используя useEffect

   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]);

Таким образом, мои панели регулируют ширину в зависимости от ширины своих прародителей, которая динамически определяется значением% ширины видового экрана.

Я предполагаю, что атрибут со стилем не запускается для повторного рендеринга с самым последним фоном стиля, который вы хотите, поэтому вам нужно либо динамически устанавливать состояние для того, что вы передаете во встроенный стиль

Надеюсь, это поможет.