ReactJS渲染组件

Im new to reacjts。我应该想从其他组件重新渲染组件。例如，我有插入和显示组件。点击提交按钮插入组件后，我想重新渲染show组件。ReactJS渲染组件

秀部件：

import React from 'react';   
import Fetch from 'react-fetch'; 
import styler from 'react-styling' 

class Show extends React.Component {    
    render() { 
    return ( 
     <div> 
     <h1>Show Component </h1> 
     </div>     
    ); 
    } 
}  
export default Show;

插入元件：

import React from 'react';   
import Fetch from 'react-fetch'; 
import styler from 'react-styling' 

class Insert extends React.Component {  
    handleSubmit(event) { 
      //Some code 
    } 
    render() { 
    return (
    <form onSubmit={this.handleSubmit}> 

    <label >name</label> 
    <input type="text" name="name" value={this.state.name} onChange=  
    {this.handleInputChange} />  
    <input type="submit" value="Submit" />  
    </form>  
); 
    } 
}  
export default Show;

现在我想打电话或重新渲染或者刷新显示组件每当我点击从插入组件提交按钮。提前致谢。

来源

2017-08-04 Karthikeyan

大概您希望“ShowComponent”的内容包含您提交的表单中的内容？ –

即时消息进行员工信息的CRUD操作。我将所有内容都设计成单页显示。我已经把div标签和分别渲染4个组件。现在当我执行插入，更新，删除，比显示应重新呈现显示当前信息。 – Karthikeyan

当道具或状态发生变化时，组件将重新渲染。你的表单提交应该更新应用的状态。如果你不明白我在说什么，那么你需要花一些时间学习React。 –

为了在两个组件之间进行通信，必须将插入组件作为Show组件的反应子组件。组件渲染可以通过改变父组件的状态和改变子组件的道具来执行。在你的情况下，没有任何条件得到满足。您也可以通过flux框架实现此功能，您可以将侦听器添加到Flux Store中，并在组件上添加eventListener以通过Store中的更改进行重新呈现。

在开始所有这些之前，我建议您更全面地理解React概念，以便了解组件之间的状态和道具行为。

来源

2017-08-04 12:22:04

。我想你可以了解更多，如果你访问我的另一个问题。 https://stackoverflow.com/questions/45500333/react-js-how-to-rerender-independed-component。这两个问题的目的都是一样的。 – Karthikeyan

ReactJS渲染组件

回答

相关问题