在React组件中使用html值

另一名开发人员创建了一个html网页，其条目如下：

<div id='username'>usernameValue</div>
<div id='reactCompIdPlace'/>

usernameValue

从该页面中，我需要获取usernameValue值，并使用jsx将其作为道具传递给react组件。该反应组件将放置在第二个位置

  <div id='reactCompIdPlace'/>

---

这可能吗？怎么用？谢谢

在主组件中，您可以查询DOM

const username = document.getElementById('username'). textContent;

然后将其传递给需要该值的组件，类似这样

class App extends Component{
  state = {username: ''};

  componentDidMount(){
    const username = document.getElementById('username'). textContent;
    this.setState({username});
  }

  render(){
    return <SomeComponent username={this.state.username} />
  }
}

类应用程序扩展组件{
状态={用户名：'}；
componentDidMount（）{
const username=document.getElementById（'username'）.textContent；
this.setState（{username}）；
}
render（）{
返回
}
}

使用querySelector？你的问题不是很清楚。当你说“另一个开发人员创建了一个网页…”时，你的意思是你有一个现有的react应用程序需要将此网页合并到其中吗？你的应用程序在哪里呈现？当您说“react组件将被放置在第二个div…”时，您的意思是这是主要的虚拟DOM呈现发生的地方吗？“React”方法是根据“其他开发人员”创建的组件创建一个组件，并且只有一个条目div用于React渲染。我希望所有内容都可以是100%React，但live不是这样。另一个开发人员创建了一个页面，我必须将该页面用作React组件的一些信息源。例如，可以通过Scala/Java程序创建此页面，现在可能需要使用react来增强html视图。这就是我提问的原因。我访问了React教程，没有找到一个简单的例子来回答这个问题。