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

Question

我正在使用 react-chartist 创建图表。在标签上，我想在标签文本旁边添加图像。我尝试了所有的想法，但没有一个奏效。一切回归[object Object] 。这个问题有没有好的解决办法呢？我还可以仅使用 css 添加标签，但如果我可以在<Chartist />内做到这一点组件的话会容易得多。

我尝试的简单代码示例(下面的codesandbox演示):

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链接，我们也可以更新react版本。

检查我创建的新沙箱。

https://codesandbox.io/s/chartist-m1yv9

方法是:每个 React Chartist 组件都附加有它的 Chartist 对象。因此，添加一个引用来捕获它并从每个图表的上下文中更新标签，就像 jsbin 示例一样。

import Chartist from "chartist";

//in componentDidMount()
      const chart = this.refTwo.current;
      chart.chartist.on("draw", context => {
        if (context.type === "label" && context.axis.units.pos === "x") {
          if (context.text && context.text.image) {
            const group = new Chartist.Svg("g");
            group.append(
              new Chartist.Svg("image", {
                "xlink:href": context.text.image,
                width: "30px",
                height: "30px",
                x: context.x + 55,
                y: context.y + 5
              })
            );

            context.element.replace(group);
          }
        }
      });


// in render()
<ChartistGraph
          ref={this.refTwo}
          data={data2}
          options={options}
          type="Bar"
 />