Question

学习React并试图欺骗this codepen。我不明白两件事。

largebox，flex和其他CSS类之前的...是什么？ return <div style={{...largebox, ...flex}} key={props.id}
$在CSS网址参数中有什么作用？是jQuery吗？ `url（$ {props.photo}）

const FormCard = (props) => (
  <div>
    {
      DATA.map((props) => {
        return <div style={{...largebox, ...flex}} key={props.id}>
          <div style={{...Photo,backgroundImage: `url(${props.photo})`}}></div>
          <div>
            <Author author={props.author}/>
            <Something bio={props.bio}/>
            <AdBox adpic={props.adpic} />
            <IconBox />
          </div>
      </div>
      })
    }
  </div>
)

Answer 1

三个点“ ...”被称为扩展运算符，请参见此处https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
$符号不是Jquery，但实际上是引用模板文字：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

希望这些文档足够，因为我目前找不到我记得的[该教程]的[链接] ...

Answer 2

扩展运算符：

const styleA = { color: 'red' };
const styleB = { background: 'blue' };

const styleC = { ...styleA, ...styleB };

// styleC = {color: "red", background: "blue"}

字符串模板：

const user = 'Bob';

const greetings = `Hello ${user}`;

// greetings = 'Hello Bob'

Answer 3

对于您的第一个问题，我们在下面的简单描述中将其称为Spread Operator：

 style={{...largebox, ...flex}}

这意味着将largebox和flex对象的所有属性复制到一个新对象中，并将其关联为style。或者这行表示：

style={{...Photo,backgroundImage:"myurl}"}

为我创建一个具有Photo对象所有属性的新对象，并为其添加名称为backgroundImage的属性。因此，如果照片等于{name:'1.jpg'}，则新对象等于

{name:'1.jpg',backgroundImage:"myUrl"}

第二个问题，这是模板文字，允许您在字符串内编写变量或调用函数。认为我们没有这个，所以我们必须这样写：

backgroundImage: "url(" + props.photo +")"

就像您看到的那样，它像props.photo和其他字符串一样。但是使用模板文字，我们可以使用反引号将字符串包装起来，然后在${}之间编写javascript的变量或函数，如下所示

backgroundImage: `url(${props.photo})`

然后将${props.photo}替换为其值。

如何在没有`$`的React CSS内联样式中使用url？

3 个答案: