How to use the mobx-react.observer function in mobx-react

{/*  */}
      
      
        {item.id} - {Math.random()}
      
      
        {item.title}
      
      
        {item.role}
      
    
  
));

const SelectLinkItem3 = observer(({ item = {} }) => (
  
    
      
        
      
      
        {item.id} - {Math.random()}
      
      
        {item.title}
      
      
        {item.role}

// 网页判断不了还有没有下一页, 假如长度小于一页24个, 不请求
        if ($.tag.list.length < 24) {
          return false
        }
        return $.fetchTag()
      }}
    />
  )
}

List.contextTypes = {
  $: PropTypes.object,
  navigation: PropTypes.object
}

export default observer(List)

import { observer } from 'mobx-react'
import React from 'react'
import Tooltip from '@cypress/react-tooltip'

import events from '../lib/events'

import Controls from './controls'
import Stats from './stats'

const Header = observer(({ appState, events, statsStore }) => (
  <header>
    View All Tests <span>F</span><p></p>} wrapperClassName='focus-tests'&gt;
      <button> events.emit('focus:tests')}&gt;
        <i></i>
        <span>Tests</span>
      </button>
    
    
    <div>
    
  </div></header>
))

Header.defaultProps = {
  events,
}

fontSize: 14,
              verticalAlign: 'text-bottom',
            }}
          >
            arrow_right
          
        ) : null}
        {linkText.length > trimmingLength
          ? `${linkText.substring(0, trimmingLength)}...`
          : linkText}
      
    
  );
};

export default inject('store')(observer(ActiveLink));

halo: {
        color: theme.palette.primary.main,
        borderColor: theme.palette.primary.main,
        borderWidth: '2px',
        borderStyle: 'solid',
        borderRadius: '50%',
        width: '56px',
        height: '56px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: theme.spacing.unit
    }
});

const PublicDataPortal = observer((props: PublicDataPortalProps & WithStyles & WithWidth) => {
    const { studyId, classes, width } = props;
    const { currentStudy } = applicationState;
    if (!currentStudy) {
        return (
            <div>
                
                
                <div>
                    <div>
                         Study does not exist.
                    </div>
                </div>
            </div>
        );
    }
    let {

const { currentTeam } = store;

      if (!currentTeam || currentTeam.slug !== teamSlug) {
        store.setCurrentTeam(teamSlug);

        const { currentTeam: newTeam, currentUser } = store;
        const isTL = (currentUser && newTeam && currentUser._id === newTeam.teamLeaderId) || false;

        if (this.state.isTL !== isTL) {
          this.setState({ isTL });
        }
      }
    }
  }

  return observer(App);
}

*         Unless required by applicable law or agreed to in writing, software
 *         distributed under the License is distributed on an "AS IS" BASIS,
 *         WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *         See the License for the specific language governing permissions and
 *         limitations under the License.
 */

import React, {useEffect} from 'react';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';

import Loading from '../../../common/loading';
import Error from '../../../common/error';
import LatencyCostTab from './latencyCostTab';

const LatencyTabContainer = observer(({traceId, store}) => {
    useEffect(() => {
        store.fetchLatencyCost(traceId);
    });

    return (
        <section>
            { store.promiseState &amp;&amp; store.promiseState.case({
                pending: () =&gt; ,
                rejected: () =&gt; ,
                fulfilled: () =&gt; ((store.latencyCost.latencyCost &amp;&amp; store.latencyCost.latencyCost.length)
                    ? 
                    : (<div>
                        <h6>No span with parent-child relationship found</h6>
                    </div>))
            })
            }</section>

const Input = injectIntl(withStyles(styles, { withTheme: true })(observer(({ classes, intl, createEvent }) => (
  
     createEvent.resultSetter = e.target.value}
      placeholder={intl.formatMessage(messages.resultSetterPlaceholder)}
      onBlur={createEvent.validateResultSetter}
      error={!!createEvent.error.resultSetter}
    />
    {!!createEvent.error.resultSetter && (
      {intl.formatMessage({ id: createEvent.error.resultSetter })}
    )}
  
))));

export default inject('store')(observer(ResultSetter));

)}
      onHeaderRefresh={() => $.fetchList(key)}
    />
  )
}

List.defaultProps = {
  title: '全部'
}

List.contextTypes = {
  $: PropTypes.object
}

export default observer(List)

{this.deleteState.fetch !== null &&
                  this.deleteState.error !== null
                    ? "Retry"
                    : "Confirm"}
                
              
            )}
          
        
      );
    }
  }
);

const DeleteSilence = observer(
  class DeleteSilence extends Component {
    static propTypes = {
      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
      alertmanager: APIAlertmanagerUpstream.isRequired,
      silenceID: PropTypes.string.isRequired
    };

    toggle = observable(
      {
        visible: false,
        toggle() {
          this.visible = !this.visible;
        }
      },
      { toggle: action.bound }
    );