Question

我正在开发一个React应用程序，该应用程序试图在单击按钮时在屏幕上呈现文本。我定义了一个onButtonClick函数，只要单击该按钮，它就会触发。但是，我从函数返回的HTML并未呈现在屏幕上。我正处于React的学习阶段，所以如果问题看起来很傻，请原谅。

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

您不能只从按钮处理程序中返回。相反，您将需要在const electron = require('electron'); let rootPath = "src/Page/index.html" //Path to the html file LoadNewWindowInCurrent(rootPath); //Opens new html file in current window //Here's the ready function for you to use function LoadNewWindowInCurrent (PathToHtml){ let localWindow = electron.remote.getCurrentWindow(); localWindow.LoadFile(PathToHtml); }函数中“捕获”状态更改；;

render()

class Example extends React.Component {
  constructor() {
    super();

    this.state = {
      blockno: 0
    }
  }
  OnButtonClick = () => {
    this.setState({
      blockno: this.state.blockno + 1
    });

  }

  render() {
    let blockno = null;

    if (this.state.blockno > 0) {
      blockno = < div > {
        `some text (${this.state.blockno})`
      } < /div>;
    }

    return ( < div > { /* var from above, NULL or your text */ } {
        blockno
      }

      { /*  Button */ } <
      div onClick = {
        this.OnButtonClick
      } > Click me! < /div> <
      /div>
    );
  }
}

// Render it
ReactDOM.render( <
  Example / > ,
  document.getElementById("react")
);

Answer 2

正在返回值，但是返回framework / browser / etc。没有理由用该值做任何事情。

尝试以另一种方式来思考，即“更多React方式”。您不想返回要呈现的值，而是想更新状态。像这样：

constructor() {
  super();

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


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

现在您不返回任何内容，而是更新组件的状态。然后，在render方法中，根据当前状态有条件地呈现UI：

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

点击处理程序不会修改页面，它只会修改您正在编写的组件的状态。 render方法负责根据该状态呈现UI。状态更改时，将再次调用render以重新呈现输出。

（注意：这是否完全是您在用户界面中寻找的功能还不是100％清楚，因为您不清楚要构造的内容。但是这里的要点是是为了说明如何在React中更新状态和呈现输出。您可以根据需要从那里调整您的逻辑。）

Answer 3

您必须根据自己的状态进行渲染。请查看react docs上的教程以了解有关React如何工作的更多信息。真的很好

这是您的代码的有效版本。希望对您有帮助

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 4

我看到的是您正在尝试建立一个计数器。从点击处理程序函数返回的值无法呈现，相反，您需要按以下方式在呈现函数中对其进行管理：

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

还请注意，setState方法是异步的，请阅读文档https://reactjs.org/docs/react-component.html#setstate

如何从React中的javscript函数返回HTML <div>标签？

4 个答案: