react.js从函数渲染图像标签

Question

我有一个用d3.js创建的条形图，正在尝试为x轴上的每个刻度显示一个图像标签。例如，

class Test extends Component {

constructor(props) {

  super(props);
  this.state = {
      data: null
    }
  this.renderAxis = this.renderAxis.bind(this);
 }

componentDidMount() {

  this.setState({
     data: [
             {
               name: 'hello',
               imgUrl: 'https://img.com/someImageUrl',
               value: 100
              },
             {
               name: 'ola',
               imgUrl: 'https://img.com/someImageUrl2,
               value: 50
              }
           ]
        })
  }

  componentDidUpdate(){

       this.renderAxis();
    }

   renderAxis() {

        this.x.domain(this.state.dummyData.map( d => d.name )) // <-- this one works

        this.x.domain(this.state.dummyData.map( d => {
        return (
            <img src={d.imgUrl} style={{'width': '30px'}}/> 
        )
    })); // <-- this one does not work

    this.y.domain([0, 100]);

...

因此，以上是我的代码，我相信您已经知道我要执行的操作。 我以为我做的方法是渲染图像而不是纯文本作为刻度标签，但是.. 在这种情况下，我应该如何渲染该图像标签？？