如何在React中插入TradingView嵌入代码？为何出现语法错误？

原因 #

React的JSX语法中，{}是用来包裹JavaScript表达式的标识。你从TradingView复制的嵌入代码里通常包含配置对象（比如new TradingView.widget({ ... })），这些对象的大括号会被JSX误识别为表达式边界。哪怕括号数量匹配，JSX会尝试解析大括号内的内容为合法JS代码，而嵌入代码里的配置是带引号键名的JSON格式，不符合JS表达式语法，因此抛出语法错误。

解决方法 #

方法1：使用dangerouslySetInnerHTML渲染完整嵌入代码 #

把TradingView的整个嵌入代码作为字符串，通过dangerouslySetInnerHTML插入组件，React会直接渲染原始HTML，不会解析里面的大括号。这是最简便的方式，适合完整嵌入代码的场景。

示例代码：

import React from 'react';

const TestPage = () => {
  // 替换成你从TradingView复制的完整嵌入代码
  const tradingViewCode = `
    <div class="tradingview-widget-container">
      <div class="tradingview-widget-container__widget"></div>
      <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
      <script type="text/javascript">
        new TradingView.widget({
          "width": 980,
          "height": 610,
          "symbol": "NASDAQ:AAPL",
          "interval": "D",
          "timezone": "Etc/UTC",
          "theme": "light",
          "style": "1",
          "locale": "en",
          "toolbar_bg": "#f1f3f6",
          "enable_publishing": false,
          "allow_symbol_change": true,
          "container_id": "tradingview_12345"
        });
      </script>
    </div>
  `;

  return (
    <div>
      <h1>Test Page</h1>
      {/* 用dangerouslySetInnerHTML渲染原始HTML */}
      <div dangerouslySetInnerHTML={{ __html: tradingViewCode }} />
    </div>
  );
};

export default TestPage;

方法2：手动转义大括号 #

如果不想用dangerouslySetInnerHTML，可以把嵌入代码里的每个{替换成{'{'}，每个}替换成{'}'}，让React把这些大括号当成普通字符串渲染。这种方式适合代码量较小的场景，需要手动修改所有大括号。

示例代码：

import React from 'react';

const TestPage = () => {
  return (
    <div>
      <h1>Test Page</h1>
      <div className="tradingview-widget-container">
        <div className="tradingview-widget-container__widget"></div>
        <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
        <script type="text/javascript">
          new TradingView.widget({'{'}
            "width": 980,
            "height": 610,
            "symbol": "NASDAQ:AAPL",
            "interval": "D",
            "timezone": "Etc/UTC",
            "theme": "light",
            "style": "1",
            "locale": "en",
            "toolbar_bg": "#f1f3f6",
            "enable_publishing": false,
            "allow_symbol_change": true,
            "container_id": "tradingview_12345"
          {'}'});
        </script>
      </div>
    </div>
  );
};

export default TestPage;

额外注意 #

嵌入代码里的class属性要改成JSX支持的className，因为class是JavaScript的关键字，JSX中用className替代。

内容的提问来源于stack exchange，提问作者RichardGarcon