本文探讨了如何在C3JS中利用JSX语法重构动态工具提示，解决内容复杂度高、难以维护的问题，以及如何通过引入React组件或使用模板字符串提升灵活性。作者分享了使用ReactDomServer.renderToString的方法实现工具提示HTML渲染的实例。
用于工具提示html渲染的C3JS JSX语法(C3JS JSX syntax on render for tooltip html)
我有一个应用程序，当它使用动态工具提示时，这必须根据图表上的值更改设计，但是将内部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
}
}
well i have a application when this use a dynamic tooltip, this have to change the design depending of the values on the graph, but add inner html into the content of the tooltip is being very hard to refactor because i have a lot of design for the tooltip into many conditions and variables
i tried importing a component but the content function expect only a string with the html
so i wondering if is possible to add jsx syntax or add a react component to render the html of tooltip into the content of 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
}
}
原文：https://stackoverflow.com/questions/40160824
更新时间：2020-02-03 07:48
最满意答案
但是，我不确定这是否是一个好的解决方案，它不是为此目的而设计的。 (如果你检查控制台，你可以看到仍然有错误)。
但是你仍然可以使用模板文字实现同样的事情：工作小提琴： http ： //jsfiddle.net/z7evqpnL/
tooltip: {
contents: (data) => `
}
}
当你使用``时，可以将变量放在字符串中，就像$ {variable}一样。 你也可以将这个字符串分成多行，这样它就更具可读性(如果你记录它也会保留所有的换行符)
You can use ReactDomServer.renderToString to render this https://www.npmjs.com/package/react-dom#react-domserver
However i am not sure if this a good solution, it was not designed for this purpose. (if you check console, you can see there still is an error).
Here is working fiddle of using React component in c3js tooltip. http://jsfiddle.net/uqh2679x/
But still you can achieve same thing using template literal: Working fiddle: http://jsfiddle.net/z7evqpnL/
tooltip: {
contents: (data) => `
}
}
When you use `` you can put variables inside the string like above ${variable}. Also you can break this string into multiple lines so it is more readable (it will also preserve all line breaks if you i.e. log it)
相关问答
从阅读文档(和提议的规范扩展)，JSX似乎只是类似HTML的语法。 它周围的其他一切都只是简单的JavaScript。 是。 JSX只是JavaScript语法的扩展 。 从规格 ： JSX是ECMAScript的类似XML的语法扩展，没有任何定义的语义。 它不是由引擎或浏览器实现的。 这不是将JSX纳入ECMAScript规范本身的提议。 它旨在被各种预处理器(转换器)用于将这些令牌转换为标准ECMAScript。 From reading the docs (and the proposed
...
这只是一个内在的对象字面值。 这是一样的 var obj = {__html: rawMarkup};
It's just an object literal inlined in the prop value. It's the same as var obj = {__html: rawMarkup};
从技术上讲，既不返回HTML，也不返回React元素。 但是，在第二种情况下，JSX编译器'知道'如何处理该元素，并且React知道如何将其呈现到DOM中。 我不确定您是否可以在标签属性中插入HTML，但是您可以使用renderToString()从组件生成HTML。 Technically, neither return HTML, but a React element. However, in the second case the JSX compiler 'knows' what to
...
组件的内容必须包装在一个标签中。 return (
Hello World!!! this is taking so long
);
The content of your component must be wrapped in a single tag. return (
...
您不能同时使用模板和JSX。 它们是如何生成渲染函数的两种选择。 在你的例子中，你可能应该在你的模板中使用v-if和v-else ，围绕着HTML块的替代品。 You can't use both a template and JSX. They are two alternatives for how to generate a render function. For your example here, you should probably use v-if and v-else in y
...
将此添加到webpack.config.js中的规则数组中，并查看问题是否已解决： {
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel-loader'
}
add this to the rules' array in webpack.config.js and see if the problem is solved: {
...
您可以使用ReactDomServer.renderToString来呈现此https://www.npmjs.com/package/react-dom#react-domserver 但是，我不确定这是否是一个好的解决方案，它不是为此目的而设计的。 (如果你检查控制台，你可以看到仍然有错误)。 这是在c3js工具提示中使用React组件的工作小提琴。 http://jsfiddle.net/uqh2679x/ 但是你仍然可以使用模板文字实现同样的事情：工作小提琴： http ： //jsfid
...
这可以通过配置tooltip.format.title来完成： tooltip: {
format: {
title: function (index) {
return totals[index]
}
和tooltip.format.value ： value: function (value, ratio, id, index) {
return d3.format("%")(value
...
你写的不是有效的JSX语法。 请尝试以下方法： mouseEnterBehaviorEnabled()是一个返回true或false的函数。 在这里，您可以在需要mouseEnter时触发逻辑。 看一下MDN上的短路评估 。 render() {
return (
...
);
}
你当然也可以这样做 r
...
这是一个很好的方法，你可以用reduce解决它： React.createClass({
render() {
this.props.data
.map(t =>
.reduce((accu, elem) => {
return accu === null ? [elem] : [...accu,
, elem]
}, null)
...
扫一扫
1239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
