반응 오류:스타일 프롭 값은 개체 반응/스타일 프롭 개체여야 합니다.

반응 오류:스타일 프롭 값은 개체 반응/스타일 프롭 개체여야 합니다.

이미지를 텍스트로 감싸려고 하는데 다음 코드를 사용하는 경우:

<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>

됐다!리액트에서 스타일을 사용할 수 없는 이유는 무엇입니까?

리액션에서 스타일을 사용할 수 있습니다.시도:style={{float: 'left'}}

문제는 당신이 스타일에 집착하고 있다는 것입니다.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

상세한 것에 대하여는, 메뉴얼을 참조해 주세요.

속성(예: 'align-self')에 특수 문자가 있는 경우 속성 이름에도 작은 따옴표를 사용해야 합니다.

style={{'align-self':'flex-end'}} 

"Unsupported style property align-self"라는 경고가 표시될 수 있습니다.align Self를 의미합니까?"를 의미합니까? 단, 스타일은 생성된html에 올바르게 복사됩니다.align-self: flex-end;.

문서에서:

style 애트리뷰트는 CSS 문자열()style="float: left"이 아닌 camelCased properties()style={{float: 'left'}}를 가진 JavaScript 객체를 받아들입니다.이는 DOM 스타일의 JavaScript 속성과 일치하며 보다 효율적이며 XSS 보안 구멍을 방지합니다.

따라서 다음과 같이 작성해야 합니다.

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

다른 사람이 말한 것처럼.HTML에서 복사할 때 문자열이 생깁니다.style="string: string"넌 가야 해style={{property: "value"}}

스타일 수업 전후에 '를 더하고 값을 더하는 것이 나에게는 효과가 있었다.

다음과 같이 반응하여 인라인 스타일을 쓸 수 있습니다.style={{float: 'left'}}

또한 여러 속성을 사용하고 싶은 경우 다음과 같이 개체로 사용하면 보풀 오류를 방지할 수 있습니다.

const imgStyle = {
  margin: '10px',
  border: '1px solid #ccc',
  float: 'left',
  height: '300px',
  width: '300px'
};

<div className="container">
         <img src={imgStyle} alt="swimmer" />
         <p> This is where the other text goes about the swimmer</p>
 </div>

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

언급URL : https://stackoverflow.com/questions/52525345/react-error-style-prop-value-must-be-an-object-react-style-prop-object