Question

我有一个应用程序，当它使用动态工具提示时，这必须根据图表上的值更改设计，但是在工具提示的内容中添加内部html很难重构，因为我有很多将工具提示设计成许多条件和变量

我尝试导入一个组件，但内容函数只需要一个带有html的字符串

所以我想知道是否可以添加jsx语法或添加一个反应组件来将工具提示的html呈现为c3的内容

 data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'area',
            data2: 'area-spline'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0,
            show: false
        }
    },
    tooltip: {
      contents: function () {
                // call a function that return a react component
      }
    }

Answer 1

您可以使用ReactDomServer.renderToString来呈现此https://www.npmjs.com/package/react-dom#react-domserver

但是我不确定这是否是一个好的解决方案，它不是为此而设计的。（如果你检查控制台，你可以看到仍有错误。）

这是在c3js工具提示中使用React组件的工作小提琴。 http://jsfiddle.net/uqh2679x/

但是你仍然可以使用模板文字实现相同的功能：工作小提琴：http://jsfiddle.net/z7evqpnL/

tooltip: {
    contents: (data) => `
        <div class="tooltip">
            <div class="title">${customText}</div>
            <div>Data1: ${data[0].value}</div>
            <div>Data2: ${data[1].value}</div>
        </div>`
    }
}

当你使用``时，你可以将变量放在字符串中，就像$ {variable}一样。你也可以将这个字符串分成多行，这样它就更具可读性（如果你记录它也会保留所有的换行符）

用于工具提示html渲染的C3JS JSX语法

1 个答案: