如何在另一个组件中单击按钮时呈现一个组件答案

【问题标题】：How to render one Component on button click in another Component如何在另一个组件中单击按钮时呈现一个组件
【发布时间】：2019-11-06 17:28:18
【问题描述】：

我是 React 的新手，无法理解 props/states。

所以我有组件 SortingVisualizer，它生成一个未排序数组的可视化表示，如下所示：


class SortingVisualizer extends React.Component {

    constructor(props){
        super(props);

        this.state = {
            array: [],
        };
    }

    componentDidMount(){
        this.resetArray();
    }

    resetArray(){
        const array = [];
        for(let i = 0; i<100; i++){
            array.push(this.getRandomInt(1,500))
        }

        this.setState({array});
    }

    //Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
    getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }


    render(){
        const {array} = this.state;  
        return( 
            <div className="array-container">
                {array.map((value, idx) => (
                    <div className = "array-elem" key = {idx} style = {{height: `${value}px`}}>
                    </div>
                ))}
            </div>
        );
    }

}

export default SortingVisualizer;

现在，我有一个 Navbar 组件，带有一个“生成新数组”按钮：


class Navbar extends React.Component {
    render(){
        return(
            <nav className = "navbar">
                <button className = "new-array-btn" onClick ={this.props.GNAclick}>Generate New Array</button>
            </nav>
        )
    }
}

export default Navbar;

我想要实现的是在单击按钮时，将在 SortingVisualizer 上调用 resetArray 以便生成一个新数组。

这是我的 App.js：


class App extends React.Component {

  GNAclickHandler = () => {
    console.log("clicked!");
    /*
    this.setState((prevState) => {
      return {GNA: !prevState.GNA}
    });
    */
  }

  render() {
    return (
      <>
        <header>
          <Navbar GNAclick = {this.GNAclickHandler}/>
        </header>
        <div className="App">
          <SortingVisualizer />
        </div>
      </>
    );
  }
}

export default App;

我不知道如何从这里取得进展，任何帮助将不胜感激。

这里是网站：https://roy-05.github.io/sort-visualizer/

【问题讨论】：

标签： reactjs react-props react-component

【解决方案1】：

我建议你阅读这篇文章https://reactjs.org/docs/thinking-in-react.html，这样你可以更好地了解状态和道具。

关于你的应用，你只需要知道哪个组件有状态，哪个组件会响应 props 的变化。

App.js

// Navbar manages the state
// and provides it to their children
// so they can rerender whenever the app state changes
class App extends React.Component {
  state = {
    data: Date.now()
  }

  createNewArray = () => {
    this.setState({
      data: Date.now()
    })
  }

  render() {
    return (
      <React.Fragment>
        <Navbar onGenerate={this.createNewArray}/>
        <SortingVisualizer data={this.state.data}/>
      </React.Fragment>
    )
  }
}

Navbar.js

// Navbar just notifies that
// and action has to be executed
// (the parent handles that action by creating a new set of data)
function Navbar(props) {
  return (
    <nav>
      <button onClick={props.onGenerate}>Generate array</button>
    </nav>
  )
}

SortingVisualizer.js

// SortingVisualizer renders what App tells it to render
function SortingVisualizer(props) {
  return (
    <main>
      {props.data}
    </main>
  );
}

【讨论】：