Question

内联样式的忠实粉丝并决定尝试一下。我慢慢地掌握了它，但我现在卡住了，因为我一直在＆lt; img＆gt;上获得＆＃34;未知道具styles。标签＆＃34;错误。

我的代码如下所示：

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

道具应为style而不是styles。您需要为height代码定义width和img。

希望这有帮助！

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>

Answer 2

首先，您需要使用样式对象，例如style={divStyles}，而不是styles="{{divStyles}}"，现在您将呈现图像，因为'url("+ imgUrl + ")',将被视为字符串而不会呈现为{{ 1}}

'url("http://mrmrs.io/images/0006.jpg")',

class App extends React.Component {
  render(){
    let imgUrl = 'http://mrmrs.io/images/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'));

Answer 3

您对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" />

反应内联样式错误

3 个答案: