ReactJS 渲染组件

Question

我是 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;

现在我想在单击插入组件中的提交按钮时调用或重新渲染或刷新显示组件。提前致谢。

Answer 1

您必须将 Insert 组件作为 Show 组件的 react 子组件才能在两个组件之间进行通信。组件渲染可以通过更改父组件的状态和更改子组件的道具来执行。在你的情况下，没有一个条件得到满足。 您还可以通过 Flux 框架实现此目的，您可以在其中将侦听器添加到 Flux Store 并在组件上添加 eventListener 以重新渲染 Store 中的更改。

在进行所有这些之前，我建议您更彻底地阅读 React 概念，以了解组件之间的状态和道具行为。