Как визуализировать один компонент по нажатию кнопки в другом компоненте - PullRequest
Новая
       30

Как визуализировать один компонент по нажатию кнопки в другом компоненте

0 голосов
/ 06 ноября 2019

Я новичок в React, и у меня возникают проблемы с наведением порядка на состояния / состояния.

Итак, у меня есть компонент 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;

Чего я хочу добиться, так это нажатия кнопки, resetArray будет вызываться в SortingVisualizer, поэтому будет сгенерирован новый массив.

Вот мой 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 /

1 Ответ

0 голосов
/ 06 ноября 2019

Я бы порекомендовал вам прочитать эту статью https://reactjs.org/docs/thinking-in-react.html,, чтобы вы могли лучше понять состояние и реквизиты.

Что касается вашего приложения, вам просто нужно знать, какой компонент имеет состояние икоторый будет реагировать на смену реквизита.

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>
  );
}
...