如何返回一个 HTML<div> 从 React 中的 javascript 函数标记？

Question

I am working on a React application where I am trying to render text on the screen when a button is clicked. I have defined a function onButtonClick which gets triggered whenever the button is clicked. However, the HTML that I am returning from the function is not rendered on the screen. I am in the learning stages of React so please excuse me if the question seems silly.

class App extends Component {

constructor() {
  super();

  this.state = {
    blockno:0

  }
}


OnButtonClick = () => {
  this.setState({blockno: this.state.blockno + 1})
  return(
      <div>
          <h3>Some text</h3>
      </div>
    );

}


render() {
return(
    <div>
        <Button onButtonClick={this.OnButtonClick}/>
    </div>
    );
}

}

Answer 1

The value is being returned, but the framework/browser/etc. has no reason to do anything with that value.

Try thinking about this a different way, a "more React way". You don't want to return the value to be rendered, you want to update state . Something like this:

constructor() {
  super();

  this.state = {
    blockno:0,
    showDiv: false // <-- note the new property in state
  }
}


OnButtonClick = () => {
  this.setState({blockno: this.state.blockno + 1, showDiv: true})
}

Now you're not returning anything, but rather updating the state of the component. Then in your render method you conditionally render the UI based on the current state:

render() {
  return(
    <div>
        <Button onButtonClick={this.OnButtonClick}/>
        {
            this.state.showDiv
              ?
                <div>
                  <h3>Some text</h3>
                </div>
             : ''
        }
    </div>
    );
}

The click handler doesn't modify the page, it just modifies the state of the component you're writing. The render method is responsible for rendering the UI based on that state. Any time state changes, render will be called again to re-render the output.

(Note: It's not 100% clear if this is exactly the functionality you're looking for in the UI, since it's not really clear what you're trying to build. But the point here is to illustrate how to update state and render output in React. Your logic can be tweaked as needed from there.)

Answer 2

You have to make a render based on your state. Please check the tutorial at the react docs to learn more about how React works. It's really good

Here is a version of your code that works. Hope it helps

class App extends Component {
  constructor() {
    super();

    this.state = {
      blockno: 0
    };
  }

  OnButtonClick = () => {
    //updates the states
    this.setState({ blockno: this.state.blockno + 1 });
  };
  //remember: every time there is an update to the state the render functions re-runs
  render() {
    //variable holding the blocks in an array
    let blocks = []
    //if blockno is greater than 0, it checks everytime that there is a state change
    if (this.state.blockno > 0) {
      //for every block added
      for (let index = 0; index < this.state.blockno; index++) {
        //We`re going to add to the array of blocks a new div with the block number
        blocks.push(
          <div>
            <h3>My block number is {index}</h3>
          </div>
        );
      }
    }
    return (
      <div>
        <div>
          {/**button that updates the state on every click */}
          <button onClick={this.OnButtonClick}>
            Click me to add a new div!
          </button>
        </div>
        {/**This render the blocks variable that holds the divs */}
        {blocks}
      </div>
    );
  }
}

Answer 3

What I see is that you are trying to build a counter. The value that you're returning from the click handler function can't be rendered, instead you need to manage it in the render function as follow:

    class App extends Component {
      constructor() {
        super();

        this.state = {
          blockno: 0
        }
      }


      OnButtonClick = () => {
        this.setState(prevState => ({ blockno: prevState.blockno + 1 }));
      }


      render() {
        return(
          <div>
            {this.state.blockno > 0 && <div>some text {this.state.blockno}</div>}
            <Button onButtonClick={this.OnButtonClick} />
          </div>
        );
      }
    }

Also note that the setState method is asynchronous, please read the documentation https://reactjs.org/docs/react-component.html#setstate