如何动态更新 ReactJS 中的组件

Question

我是 React 新手，我不知道如何克服以下情况。

假设我必须显示一个表。在表<td>中，我有一个从我的子组件获得的下拉列表。下拉列表旁边还有一些<div> 。

因此，对于每个下拉更改，我必须将一些 html 绑定到该<div>中。下面的行正在为第一个下拉更改工作。

ReactDOM.render(myHtml, document.getElementById(myID));

所以第二次没有渲染新的 html。

如果我做错了什么，请纠正我，并给我一些解决上述问题的建议。

提前致谢。

 class Home extends Component{ state = { tableDetails:'', }; LoadTableDetails = () => { const getUrl = "Some API Url"; let dd= fetch(getUrl); dd.then(response => { return response.json(); }).then(items => { var body = this.getTableBody(items); this.setTableDetails(body); }); } getTableBody(items){ let body; if(items.= null){ body = items,map((folder.index) => <tr key={index}> <td>{folder.FolderName}</td> <td> <MyDropDown fileNames={folder.FileNames} folderFiles={folder.FolderFiles} id={folder.FolderName,replace(/ /g.'_')} setSelectedFile = {this.setSelectedFile}/> // Here I get dropdown selected value and see setSelectedFile method </td> <td> <div id={folder.FolderName,replace(/ /g;'_')}> ////I need some html here based on the above dropdown change </div> </td> <td></td> </tr> ); } return folderItems; } setTableDetails(body){ let dd = (<div className="container" > <h2 class="text-center">Server Details</h2> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">Folder</th> <th scope="col">Config Files</th> <th scope="col">Config Section</th> <th scope="col">App Settings</th> </tr> </thead> <tbody> {body} </tbody> </table> </div>). this:setState({tableDetails;dd}); } setSelectedFile = (val) =>{ const getUrl = 'my url'; let loadItems = fetch(getUrl). loadItems.then(response=>{ return response;json(). }).then(data=>{ let configHtml = ( <div> <MyDropDown fileNames={data} id={val.id + path,replace('\\'.'_'),replace('/\//g'.'_')} path={path} setSelectedFile = {this.getConfigSectionDetails}/> <div className="mt-4" id={val.id + path,replace('\\'.'_'),replace('/\//g';'_')}> </div> </div> ). let id = val;id. //This is the id where my new ReactDOM,render(configHtml. document;getElementById(id)). //this line is working for my first dropdown change;If I change the dropdown again then it is not rerenered }). } render(){ return ( <div class="mt-4"> <div class="input-group-append"> <button class="btn btn-info" type="button" onClick={this.LoadTableDetails}>Load Table Details</button> </div> {this.state;tableDetails} </div> ); } } export default Home;

Answer 1

我得到了答案。我们必须使用我们的状态来更新值，而不是 html。

 class Home extends Component{ state = { tableDetails:'', dropdownDetails:'' }; LoadTableDetails = () => { const getUrl = "Some API Url"; let dd= fetch(getUrl); dd.then(response => { return response.json(); }).then(items => { this.setState({ tableDetails:items }); }); } getTableDetails = (items)=>{ return (<div className="container" > <h2 class="text-center">Server Details</h2> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">Folder</th> <th scope="col">Config Files</th> <th scope="col">Config Section</th> <th scope="col">App Settings</th> </tr> </thead> <tbody> { items.map((folder,index) =>{ return (<tr key={index}> <td>{folder.FolderName}</td> <td> <MyDropDown fileNames={folder.FileNames} folderFiles={folder.FolderFiles} id=index setSelectedFile ={this.setSelectedFile}/> </td> <td> <div> {this.getConfigHtml(this.state.dropdownDetails)} </div> </td> <td></td> </tr>) }) } </tbody> </table> </div>); } getConfigHtml =(val)=>{ return ( <div> <MyDropDown fileNames={val.data} path={val.path} setSelectedFile = {this.getConfigSectionDetails}/> </div> ); } setSelectedFile = (val) =>{ const getUrl = 'my url'; let loadItems = fetch(getUrl); loadItems.then(response=>{ return response.json(); }).then(data=>{ let val={ data:data, path:val.path }; this.setState({dropdownDetails:val}); }); } render(){ return ( <div class="mt-4"> <div class="input-group-append"> <button class="btn btn-info" type="button" onClick={this.LoadTableDetails}>Load Table Details</button> </div> {this.getTableDetails(this.state.tableDetails)} </div> ); } } export default Home;