onClick 不会呈现新的反应组件。答案

【问题标题】：onClick doesn't render new react component.onClick 不会呈现新的反应组件。
【发布时间】：2016-02-23 17:39:33
【问题描述】：

我是反应世界的新手，我有这样的线路：

<Button onClick={() => console.log("hello")}>Button</Button>

点击后，您将在控制台上打印hello。现在将行更改为：

<Button onClick={() => <NewComponent />}>Button</Button>

现在点击按钮，我希望 NewComponent 被渲染。但事实并非如此。

我不确定，为什么会这样。请注意，我在render 方法中有上述代码。

【问题讨论】：

这不是它的工作原理。您希望组件在哪里呈现？
但是在哪里呢？按钮上方？按钮下方？按钮里面？ 在onClick 属性内？ 其他地方？目前您的点击处理程序类似于function() { React.createElement(...); }。它对创建的元素没有任何作用。
@FelixKling：哦，现在说得通了，所以我们需要做类似React.render 之类的操作，并给出需要渲染的区域
对。但是您的组件可能应该只有状态并在单击按钮后在按钮旁边呈现组件。
@FelixKling：谢谢现在有道理了，你可以提供我能接受的答案。

标签： javascript reactjs

【解决方案1】：

您可能希望有一个有状态的组件，在单击按钮后在按钮旁边显示另一个组件。您需要做的就是跟踪按钮是否被点击：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent: false,
    };
    this._onButtonClick = this._onButtonClick.bind(this);
  }

  _onButtonClick() {
    this.setState({
      showComponent: true,
    });
  }

  render() {
    return (
      <div>
        <Button onClick={this._onButtonClick}>Button</Button>
        {this.state.showComponent ?
           <NewComponent /> :
           null
        }
      </div>
    );
  }
}

【讨论】：

嗨。如果我只想在同一页面上加载 NewComponent 覆盖所有其他组件而不使用反应路由器怎么办？
onClick={()=>this._onButtonClick}
@MustafaMuawia：没有。
由于某种原因，它向我显示了这个错误：TypeError: Cannot read property 'onButtonClick' of undefined
@AbhirajshriWinsome：您很可能在一个函数中访问this.onButtonClick，而该函数的this 值并不指向组件实例。

【解决方案2】：

这里有一个CodePen 来展示它的实际效果。

HTML

<div id="root">loading...</div>

JSX

class NewComponent extends React.Component {
  render() {
    return (
      <div {...this.props}>
        new component
      </div>
    );
  }  
}

class Button extends React.Component {
  render() {
    return (
      <button {...this.props}>
        click
      </button>
    );
  }  
}

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

    this.state = {
      clicked: false
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      clicked: true
    });
  }

  render() {
    return (
      <div>
        <Button onClick={this.handleClick} />
        {this.state.clicked ? <NewComponent /> : null}
      </div>
    );
  }
};

React.render(
  <App />,
  document.getElementById("root")
);

【讨论】：

一支笔从未有过如此大的帮助。我开始遇到关于 React 的条件渲染问题 :) 谢谢！

【解决方案3】：

改用： {this.state.clicked && <NewComponent />}

【讨论】：

【解决方案4】：

你可以使用 react-router-dom 的 withRouter()。当我们使用<Route path='/path' component={newComponent} />react-router-dom 传递三个 props "history,location and match" 时，您可以在 onClick 中使用 history props 的 push() 函数通过在 withRouter() 中将整个组件传递为：

JSX

import { withRouter } from 'react-router-dom' ;
import Button from 'buttonFolder/button.component';
const yourComponent = ({history}) => {

return (
       <Button onClick{() => history.push.('/path')}> New componentPage </Button>
)};

export default withRouter(yourComponent);

【讨论】：

【解决方案5】：

您需要设置状态来跟踪组件的可见性。默认为 false，onclick 设置状态为 true。在你的渲染中做类似的事情 {this.state.visible ? ：空}

【讨论】：