Question

我正在尝试获取一些数据并将页面设置为结果

function getData() {
    $.ajax({
        url:"http://localhost:8080/",
        type:'GET',
        dataType: 'html',
        success: function(data){
            console.log(data);
            $('.App').html(data);
        }
    });
}

class App extends Component {
  render() {
    getData()
    return (
      <div className="App">This worked</div>
    );
  }
}

export default App;

这是打印出的回复：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.c17080f1.css" rel="stylesheet"></head><body><div id="root"><div class="App" data-reactroot=""><header class="App-header"><img src="logo.svg" class="App-logo" alt="logo"/><h1 class="App-title">Welcome to React</h1></header><div></div></div></div><script type="text/javascript" src="/static/js/main.d1b4ad06.js"></script></body></html>

当页面加载时，它会闪烁正确的HTML一秒钟，然后我收到此错误：

VM11047:1 Uncaught SyntaxError: Unexpected token <

我做错了什么？

Answer 1

您可以使用react的dangerouslySetInnerHTML道具，更多信息https://reactjs.org/docs/dom-elements.html

或更安全的处理方式是返回json响应并创建组件以显示返回的数据

还有一篇有趣的文章说明为什么不混合jquery dom操作和反应。 http://tech.oyster.com/using-react-and-jquery-together/

从AJAX响应中设置React内部的HTML

1 个答案: