Question

我是ReactJS的新手。我想要从其他组件重新渲染组件。例如，我已插入并显示组件。我想在点击提交插入组件按钮后重新渲染show组件。

显示组件：

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;

现在，每当我单击“插入”组件中的“提交”按钮时，我都要调用或重新渲染或刷新show组件。提前谢谢。

Answer 1

You must have the Insert Component as the react child of the Show component in order to communicate in between two components. The component render can be performed by the changing of state for parent component and changing of props for the child component. In your case none of the conditions are being satisfied. You can also achieve this via flux framework where you can add listener to a Flux Store and add eventListener on your component to re-render with changes in the Store.

Before going to all of this I would suggest that you go through the React concepts more throughly in order to understand state and props behaviours in between components.

ReactJS渲染组件

1 个答案: