javascript - react 内联样式错误

Question

内联样式的忠实粉丝并决定尝试一下。我正在慢慢掌握它的窍门，但现在我陷入了困境，因为我不断收到“ 标记上的未知 Prop styles”错误。

我的代码如下所示:

render(){
    let imgUrl = 'http://mrmrs.io/images/0006.jpg';
    let divStyles = {
        backgroundImage:'url(" + imgUrl + ")',
        backgroundSize: 'cover'
    };
    return(
        <main class="cf w-100">
          <div class="fl w-50 w-third-m w-25-ns">
            <div class="aspect-ratio aspect-ratio--1x1">
              <img styles="{{divStyles}}"  class="db bg-center cover aspect-ratio--object" />
            </div>
          </div>
        </main>

    )
}

简单的事情总是给我带来最多的问题。任何帮助，将不胜感激。

Answer 1

Prop 应该是style而不是styles。您需要为 img 标签定义一个 height 和 width 。

希望这有帮助!

class App extends React.Component{
  render(){
      let imgUrl = 'http://mrmrs.io/images/0006.jpg';
      let divStyles = {
          backgroundImage:'url(' + imgUrl + ')',
          backgroundSize: 'cover',
          height: 200,
          width: 200,
      };
      return(
          <main className="cf w-100">
            <div className="fl w-50 w-third-m w-25-ns">
              <div className="aspect-ratio aspect-ratio--1x1">
                <img style={divStyles}  className="db bg-center cover aspect-ratio--object" />
              </div>
            </div>
          </main>

      )
  }
}
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>