如何在反应中传递组件内部的变量

Question

我有以下组件：

const Rec = React.createClass({
    mixins: [React.addons.PureRenderMixin],
    renderText() {
        if (hidden) {
            req_link = <Link to={`/rec/edit`} style={st}>Request link</Link>
        }
        else {
            request_link = null   
        }

        return (
             <div> {request_link} </div>
        );
    },

    fields() {
        ....
        if (fieldID == "hidden") {
              var hidden = true;
        } else {
              var hidden = false;
        }
        return (
              <div> other stuff....  </div>
        );
   },
});

如果hidden 的值为真，renderText() 应该显示一个链接，并且此变量的值只能在fields() 中设置。那么如何将hidden 从fields() 传递到renderText()？

Answer 1

创建一个状态变量并监控该变量，如下面的代码所示

const Rec = React.createClass({
    getInitialState: function() {
    return {hidden: false};
  }
  renderText: function() {
        if (this.state.hidden) {
            req_link = <Link to={`/rec/edit`} style={st}>Request link</Link>
        }
        else {
            request_link = null   
        }

        return (
             <div> {request_link} </div>
        );
    },

    fields: function() {
        ....

        if (fieldID == "hidden") {
             this.setState({hidden: true});
        } else {
              this.setState({hidden: false});
        }
        return (
              <div> other stuff....  </div>
        );
   },
});

ES6 脚本格式

export default class Rec extends React.Component{
    constructor(){
      super();
      this.state = {hidden: false};
    }
  renderText = () =>{
        if (this.state.hidden) {
            req_link = <Link to={`/rec/edit`} style={st}>Request link</Link>
        }
        else {
            request_link = null   
        }

        return (
             <div> {request_link} </div>
        );
    }

    fields = () => {
        ....

        if (fieldID == "hidden") {
             this.setState({hidden: true});
        } else {
              this.setState({hidden: false});
        }
        return (
              <div> other stuff....  </div>
        );
   }
}