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组件，它运行正常。但是，我想要的是在单击链接时调用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函数，而函数showSnaker又将点击状态设置为true。每当状态改变时它会响应它触发一个渲染，我设置三元运算符检查点击状态是否为真，使Snaker组件可见，如果没有设置，则不显示{this.state.clicked ? <Snaker message="I am Rahul Gavande"/> : ""}

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

1 个答案: