Globale Variable in Reactjs

Question

Wie kann ich eine globale Variable in einer Komponente haben, auf die alle Methoden Zugriff haben? Ich kann den Status nicht verwenden, da ich Rendering verschachtelt habe und durch Ändern des Status einer Variablen die Warnung erhalten habe, dass das Rendern rein sein soll und nicht das setState inside render verwenden soll ....! Daher muss ich eine reguläre globale Variable haben, auf die alle Methoden der Komponente zugreifen können und deren Wert dort geändert werden kann, wo sie benötigt wird. Kann mir bitte jemand helfen?

P.S. Warum sollte ich einen Zustand nicht so ändern: this.state.variable = true;?

Also hier ist mein vereinfachter Code. this.setState({hidden: true}); wird die Warnung ausgeben, da diese Komponente in einer anderen Komponente gerendert wird. Ich muss hidden machen, um wie eine globale Variable zu benehmen und den Zustand nicht verwenden!

const Component = React.createClass({ 
    mixins: [React.addons.PureRenderMixin], 
    getInitialState: function() { 
     return {hidden: false}; 
    }, 

    renderFixedFields(.....) { 
     var request_link; 
     if (!this.state.hidden) { 
      request_link = <Link to={`/${record.get('id')}/request`}>Send Request </Link> 
     } 
     else { 
      request_link = null 
     } 
     return (
      <div> 
       {request_link} 
      </div> 
      ) 
    }, 

    renderField(.....) { 
     var self = this; 
     //.... 
     if (fieldID == "open_access") { 
      this.setState({hidden: true}); 
     } 
     return (
      //..... 
     ); 
    }, 

    renderFieldBlock(........) { 
     const [maj, min] = getMajMinFields(s); 
     //.... 
     const minFields = min.entrySeq().map(
      ([id, f]) => this.renderField(fieldID, .....)); 

     return (
      //... 
      <div> 
       { minorFields } 
      </div> 
     ); 
    }, 
} 

Answer 1

Einstellung Zustand innerhalb von render() wird immer ein Problem sein als Staat Ändern eines render() ausstellt. Während die spezifische Sache, die Sie tun, kein Problem verursacht, sollten Sie wirklich über den Lebenszyklus Ihrer Komponente nachdenken und wo dieser Zustand wirklich geändert werden muss. Wenn Sie Zustand ändern müssen auf der Grundlage neuer Requisiten dann componentWillReceiveProps verwenden:

componentWillReceiveProps: function(nextProps) { 
    this.setState({ 
    likesIncreasing: nextProps.likeCount > this.props.likeCount 
    }); 
}