javascript - 强制重新渲染 React 组件的一部分以使其从状态更新自身

Question

我从远程服务器下载 SVG 图像并使用 react-svg ( https://www.npmjs.com/package/react-svg )在我的 React 组件中呈现它：

<ReactSVG ref={this.svgRef} src={`http://localhost:3001/${this.state.firstName}${this.state.lastName}.svg`} />

如您所见，此 svg 使用模板文字来形成其名称（svg 的名称取决于存储在状态中的用户名）。

接下来我需要处理这个 svg 中的子元素。我使用 ref 执行此操作，然后将结果设置为状态：

const node = this.svgRef.current.childNodes[0];
node.forEach(e => {
   if (e.className.baseVal === 'one') {
     this.setState({
        something: e.className.baseVal
        })
      }
//etc etc
   })

最后，我希望我的页面能够使用这个新的状态值进行更新。说，我有

<Row className='border'>
  <Col className='border'>SomeCol</Col>
  <Col className='border'>{this.state.something}</Col>
</Row>

我想用 this.state.something 更新 Col，但问题是它不会在渲染时更新。如何仅重新渲染组件的这一部分？我应该制作一个单独的组件吗？或者还有其他好的做法吗？

标签： javascriptreactjssvg