Question

我是新的反应世界，我有这样的界限：

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

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

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

现在单击按钮，我希望呈现NewComponent。但它并没有。

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

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

Answer 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")
);

Answer 3

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

Answer 4

您需要设置状态以跟踪组件的可见性。默认将其设置为false，onclick将状态设置为true。在渲染中执行类似 {this.state.visible吗？：null}

Answer 5

你可以使用react-router-dom的withRouter()。当我们使用 <Route path='/path' component={newComponent} /> react-router-dom 传递三个 props "history,location and match" 时，您可以使用 push() 函数在您的历史道具中onClick 只需在 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);

onClick没有呈现新的反应组件。

5 个答案: