如何使用 React 在标签中设置 img？

Question

我正在使用react-chartist. 在标签上，我想在标签文本旁边添加图像。我尝试了我所有的想法，但都没有奏效。一切归来[object Object]。这个问题是否有好的解决方案？我也可以使用 just 添加标签css，但如果我可以在<Chartist />组件内部添加标签，那就容易多了。

我尝试的简单代码示例（下面的代码沙盒演示）：

class Chart extends React.Component {

  render() {

    const labels = ["label 1", "label 2", "label 3"];

    const images = [

      "http://placekitten.com/100/100",

      "http://placekitten.com/101/101",

      "http://placekitten.com/102/102"

    ];

    const series = [[40, 30, 20]];

    const labelsInsideReactFragment = labels.map((el, key) => (

      <React.Fragment>

        <img src={images[key]} /> {el}

      </React.Fragment>

    ));

    const labelsViaGhIssue = labels.map((el, key) => {

      return {

        label: el,

        image: images[key]

      };

    });

    const labelsInsideDiv = labels.map((el, key) => (

      <div>

        <img src={images[key]} /> {el}

      </div>

    ));

    const labelsOnlyImg = labels.map((el, key) => <img src={images[key]} />);

    const data1 = {

      labels,

      series

    };

    const data2 = {

      labels: labelsViaGhIssue,

      series

    };

    const data3 = {

      labels: labelsInsideDiv,

      series

    };

    const data4 = {

      labels: labelsInsideReactFragment,

      series

    };

    const data5 = {

      labels: labelsOnlyImg,

      series

    };

    const options = {

      height: "200px",

      width: "500px"

    };

    return (

      <div>

        <ChartistGraph data={data1} options={options} type="Bar" />

        <ChartistGraph data={data2} options={options} type="Bar" />

        <ChartistGraph data={data3} options={options} type="Bar" />

        <ChartistGraph data={data4} options={options} type="Bar" />

        <ChartistGraph data={data5} options={options} type="Bar" />

      </div>

    );

  }

}

演示：https : //codesandbox.io/s/chartist-8oeju

我还在以下网站上找到了这个演示jsbin：https : //jsbin.com/gulokelide/edit? js, output 但React我猜它没有用。

Answer 1

JSbin 示例使用了一个on("draw")不受支持的自定义函数react-chartist（并且它还手动计算标签位置，因此如果系列中的宽度或数据量发生变化，它将不会缩放）。也就是说，最简单的解决方案是创建您自己的Chartist实例并对其进行更改以满足您的需求。工作示例（无论 中的宽度和/或项目数量如何，标签和图像都将缩放到中心series）：组件/图表import React, { Component, cloneElement, Children } from "react";import Chartist from "chartist";import PropTypes from "prop-types";class Chart extends Component {&nbsp; componentDidUpdate(prevProps) {&nbsp; &nbsp; if (this.props !== prevProps) this.updateChart(this.props);&nbsp; }&nbsp; componentWillUnmount() {&nbsp; &nbsp; if (this.chart) {&nbsp; &nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; this.chart.detach();&nbsp; &nbsp; &nbsp; } catch (err) {&nbsp; &nbsp; &nbsp; &nbsp; throw new Error("Internal chartist error", err);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }&nbsp; componentDidMount = () => this.updateChart(this.props);&nbsp; updateChart = ({ data, listener, options, responsiveOptions, type }) => {&nbsp; &nbsp; let event;&nbsp; &nbsp; if (this.chartist) {&nbsp; &nbsp; &nbsp; this.chart.update(data, options, responsiveOptions);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; this.chart = new Chartist[type](&nbsp; &nbsp; &nbsp; &nbsp; this.chart,&nbsp; &nbsp; &nbsp; &nbsp; data,&nbsp; &nbsp; &nbsp; &nbsp; options || {},&nbsp; &nbsp; &nbsp; &nbsp; responsiveOptions || []&nbsp; &nbsp; &nbsp; ).on("draw", context => {&nbsp; &nbsp; &nbsp; &nbsp; if (type === "Pie") return;&nbsp; &nbsp; &nbsp; &nbsp; if (context.type === "label" && context.axis.units.pos === "x") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (context && context.text) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const group = new Chartist.Svg("g");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const isBar = type === "Bar";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const hasImage = context.text.image;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const hasLabel = context.text.label;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (hasImage) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const x = isBar&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? context.x + context.width / 2 - 15&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : context.x + 5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const y = isBar&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? context.y + context.height / 2 - 10&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : context.y + 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; group.append(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new Chartist.Svg("image", {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "xlink:href": context.text.image,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "30px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "30px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (hasLabel) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const x = isBar&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? context.x + context.width / 2 + 5&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : context.x + 30;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const y = hasImage&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? context.y + context.height / 2 + 30&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : context.y + context.height / 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; group.append(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new Chartist.Svg("text", {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "100px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "40px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text-anchor": "middle",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "alignment-baseline": "hanging"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).text(context.text.label || "")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.element.replace(group);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; if (listener) {&nbsp; &nbsp; &nbsp; &nbsp; for (event in listener) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (listener.hasOwnProperty(event)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.chart.on(event, listener[event]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; return this.chart;&nbsp; };&nbsp; render = () => {&nbsp; &nbsp; const { className, style, children, data, type } = this.props;&nbsp; &nbsp; const childrenWithProps =&nbsp; &nbsp; &nbsp; children &&&nbsp; &nbsp; &nbsp; Children.map(children, child =>&nbsp; &nbsp; &nbsp; &nbsp; cloneElement(child, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; className={`ct-chart ${className || ""}`}&nbsp; &nbsp; &nbsp; &nbsp; ref={ref => (this.chart = ref)}&nbsp; &nbsp; &nbsp; &nbsp; style={style}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; {childrenWithProps}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; };}Chart.propTypes = {&nbsp; type: PropTypes.oneOf(["Line", "Bar", "Pie"]).isRequired,&nbsp; data: PropTypes.object.isRequired,&nbsp; className: PropTypes.string,&nbsp; options: PropTypes.object,&nbsp; responsiveOptions: PropTypes.array,&nbsp; style: PropTypes.object};export default Chart;