在另一个组件的函数中调用 React 组件

Question

我现在正在尝试 React，我偶然发现了一个想法。我希望从另一个反应组件的功能中调用一个反应组件。但是，我无法让它工作。下面是我的代码，

var Snaker = React.createClass({
componentDidMount: function() {
    $('.snacker').fadeIn(500);
    $('.snacker').delay(2000).fadeOut(500);
  },
    render: function() {
    return <div>
              <div className="snacker snacker-right-top">
                <p>{this.props.message}</p>
              </div>
           </div>
    }
});

var Handle = React.createClass({
        showSnaker: function(){
        <Snaker message="React React"/>
    },
        render: function() {
      return <div>
                            <Snaker message="React's example"/>
                <a href="#" onClick={this.showSnaker}>Show me</a>
             </div>
    }
});

ReactDOM.render(
    <Handle />,
    document.getElementById('container')
  );

在 Handle 组件中，我调用了 Snaker 组件，它工作正常。但是，我想要的是在 link 为 clicked.I 时调用 Sanker 组件，感觉应该这样做，但我无法让它工作。相同的 JSFiddle 是 here。任何帮助表示赞赏。提前致谢。 :)

Answer 1

试试这个 https://jsfiddle.net/69z2wepo/55689/

var Snaker = React.createClass({
componentDidMount: function() {
    $('.snacker').fadeIn(500);
    $('.snacker').delay(2000).fadeOut(500);
  },
    render: function() {
    return <div>
              <div className="snacker snacker-right-top">
                <p>{this.props.message}</p>
              </div>
           </div>
    }
});

var Handle = React.createClass({
        getInitialState: function() {
    return {clicked: false};
  },

    showSnaker: function(){
        this.setState({clicked: true});
    },

        render: function() {
      return <div>
                {this.state.clicked ? <Snaker message="I am Rahul Gavande"/> : ""}
                <a href="#" onClick={this.showSnaker}>Show me</a>
             </div>
    }
});

ReactDOM.render(
    <Handle />,
    document.getElementById('container')
  );

对于它的工作原理，您正在触发函数 showSnaker，该函数又将点击状态设置为 true。每当状态发生变化时都会触发渲染并且我设置了三元运算符检查点击状态是否为真，以使 Snaker 组件可见，如果未设置，则不显示任何内容 {this.state.clicked ? <Snaker message="I am Rahul Gavande"/> : ""}

在另一个组件的函数中调用 React 组件

Call a React Component inside another component's function

reactjs

ruby-on-rails-5