Question

我的JSX文件中有以下简单的反应代码：

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return <div><img src='http://placehold.it/400x20&text=slide1' alt={event.title} class="img-responsive"/><span>Hello {this.props.name}</span></div>;
    }
});

React.renderComponent(<Hello name="World" />, document.body);

DOM中的输出如下：

<div data-reactid=".0">
  <img src="http://placehold.it/400x20undefined1" data-reactid=".0.0">
  <span data-reactid=".0.1">
    <span data-reactid=".0.1.0">Hello </span>
    <span data-reactid=".0.1.1">World</span>
  </span>
</div>

我有两个问题：

图片网址呈现错误，呈现为“http://placehold.it/400x20undefined1”
我图像上的课程消失

有什么想法吗？

Answer 1

请记住，你的img不是一个DOM元素，而是一个javascript表达式。

这是一个JSX属性表达式。在src字符串表达式周围放置花括号，它将起作用。请参阅http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions

在javascript中，class属性是使用className引用的。请参阅本节中的说明：http://facebook.github.io/react/docs/jsx-in-depth.html#react-composite-components

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return <div><img src={'http://placehold.it/400x20&text=slide1'} alt="boohoo" className="img-responsive"/><span>Hello {this.props.name}</span></div>;
    }
});

React.renderComponent(<Hello name="World" />, document.body);

Answer 2

package main

import (
    "fmt"
    "log"
    "regexp"
    "strings"
)

func main() {
    logLine := `Date=2017-06-29 03:10:01.140 -700 PDT,clientDataRate="12.0,18.0,24.0,36.0,48.0,54.0",host=superawesomehost.foo,foo=bar`
    fmt.Println("logLine:        ", logLine)

    reg, err := regexp.Compile(`"([^"]*)"`)
    if err != nil {
        log.Fatal(err)
    }

    repairedLogLine := reg.ReplaceAllStringFunc(logLine, func(entry string) string {
        return strings.Replace(entry, ",", " ", -1)
    })
    fmt.Println("repairedLogLine:", repairedLogLine)
}

用url和类来反应img标记问题

2 个答案: