Ошибка реагирования Строка 18: значение prop для объекта должно быть объектом response / style-prop-object

Question

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

<div className="container">
         <img src={myImageSource} alt="swimmer" height="300" width="300" style="float: left" />
         <p> This is where the other text goes about the swimmer</p>
 </div>

Теперь я понимаю, что это style="float: left" html 5. Однако, если я использую следующий код:

<div className="container">
         <img src={myImageSource} alt="swimmer" height="300" width="300" align="left" />
            <p> This is where the other text goes about the swimmer</p>
 </div>

Работает!Почему я не могу использовать стиль в React?

Answer 1

Из doc :

Атрибут style принимает объект JavaScript с свойствами camelCased (style={{float: 'left'}}) чем строка CSS (style="float: left") . Это согласуется со свойством JavaScript в стиле DOM, более эффективно и предотвращает дыры в безопасности XSS.

Поэтому вы должны записать его как:

<img src={myImageSource} alt="swimmer" height="300" width="300" style={{float: 'left'}} />

Answer 2

Проблема в том, что вы передаете стиль как String вместо Object.React ожидает, что вы передадите стиль в нотации объекта:

style={{ float:`left` }}  // Object literal notation

или другим способом будет:

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

<div style={divStyle}>   // Passing style as an object

См. Документацию для получения дополнительной информации

Answer 3

Вы все еще можете использовать стиль в реакции.Попробуйте: style={{float: 'left'}}