Question

我是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组件，其按钮为“ Generate new Array”：


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/

Answer 1

我建议您阅读本文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>
  );
}

如何在按钮上单击后呈现一个组件

1 个答案: