只有在有人的情况下才能调用该函数

时间:2016-06-13 14:12:00

标签: reactjs jsx

嘿伙计们,我需要你的帮助。我想调用一个函数,但只有在其他函数有效的情况下。但不幸的是,我不能这样做,你能帮助我吗?

这是我的代码:

'use strict';

import React from 'react/addons';

import { Carousel, CarouselItem } from 'react-bootstrap';

import { Link } from 'react-router';

import cx from 'classnames';

import { user as userAccount } from '../../scripts/account-details';

function getColorForChannel(name) {

    const hue = Array.from(name)
      .map((ch, i) => ch.charCodeAt(0) * (i + 1))
      .reduce((sum, ch) => sum + ch, 0) % 360;

    return `hsl(${hue}, 75%, 75%)`;
}

function urlify(text){
    var urlRegex = /(https?:\/\/[^\s]+)?\.(com|pt|es|org|net|)?/g;

    return urlRegex.test(text);
}

function parseLinha(linha) {
    return linha.split(' ')
        .map((x, i) => urlify(x) ? <a key={i} href={x.trim()} target='_blank' rel='nofollow'>{x} </a> : x + " ");
}

/**
 * Usernames that don't really link to people.
 */
const nonPeopleUserNames = ['linsasupport'];

const TimelineItem = React.createClass({

    getDefaultProps() {
        return {
            important: false
        };
    },
    propTypes: {
        routeDepth: React.PropTypes.number,
        router: React.PropTypes.func,
        item: React.PropTypes.object.isRequired,
        onDelete: React.PropTypes.func,
        onLinkClicked: React.PropTypes.func.isRequired,
        important: React.PropTypes.bool
    },
    getChildContext() {
        return {
            routeDepth: this.props.routeDepth,
            router: this.props.router
        };
    },
    childContextTypes: {
        routeDepth: React.PropTypes.number.isRequired,
        router: React.PropTypes.func.isRequired
    },

    getUrlState() {
           return (               
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                        <img src="..." alt="..."/>
                            <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>...</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                            </div>
                        </div>
                    </div>
                </div>
                );
        },

        renderAttachments(attachments) {
            if (!attachments.length) { return null; }

            if (attachments.every((a) => a.Type.toLowerCase() === 'image')) {
                return (
                  <Carousel>
                        {attachments.map((a) =>
                            <CarouselItem key={a.Id}>
                        <a href={`timeline/${this.props.item.Id}/attachments/${a.Id}`} target='_blank'>
                          <div style={{
            backgroundImage: `url(/timeline/${this.props.item.Id}/attachments/${a.Id})`,
        backgroundSize: 'contain',
        backgroundPosition: 'center center',
        height: 300, width: '100%', backgroundRepeat: 'no-repeat' }} />
              </a>
            </CarouselItem>)}
        </Carousel>
      );
    }

    return (
      <div className='si-timeline-item-attachments'>
        <ul className='fa-ul'>
    {attachments.map((a) =>
            <li key={a.Id}>
              <i className='fa-li fa fa-file' />
              <a href={`/timeline/${this.props.item.Id}/attachments/${a.Id}`}
                target='_blank'>
        {a.Name}
              </a>
            </li>)}
        </ul>
      </div>
    );

              },
  handleDelete() {
    if (typeof (this.props.onDelete) === 'function') {
      this.props.onDelete();
              }
              },
  render() {
    const { item, important } = this.props;

    const itemClasses = cx({
      'si-timeline-item': true,
      'si-urgent': important
              });

    const d = item.Date instanceof Date ? item.Date : new Date(item.Date);

    return (
      <div className={itemClasses}>
        <div className='si-timeline-item-header'>
              {important ?
            <button className='btn btn-default si-delete-btn'
                onClick={this.handleDelete}
                title='Remover notificação'>
              <i className='fa fa-lg fa-remove' />
            </button> : null}
          <div className='si-profile-image-fixed'
            style={{
                backgroundImage: `url(/users/${item.Author.UserName}/profileimage)`
                }} />
                  <div>
                {nonPeopleUserNames.indexOf(item.Author.UserName) === -1 ?
                      <Link className='si-timeline-item-title-fixed'
                        onClick={(e) => this.props.onLinkClicked(e)}
                        to={`/users/${item.Author.UserName}`}>
                    {item.Author.Name} {item.Author.UserName === userAccount.manager ? <small>(Manager)</small> : null}
                      </Link> :
                      <span className='si-timeline-item-title-fixed'>
                    {item.Author.Name} {item.Author.UserName === userAccount.manager ? <small>(Manager)</small> : null}
                      </span>}

                    <date className='si-timeline-item-date-fixed' dateTime={d.toISOString()}>
                    {d.toLocaleString(navigator.language)}
                    </date>
                  </div>

                  <small className='si-timeline-item-channel'
                      style={{borderRight: `7px solid ${getColorForChannel(item.Channel.Name)}`}}>
                {item.Channel.Name}
                  </small>
                </div>
                <div className='si-timeline-item-content'>
                {item.Contents.split('/n')
                        .map((l, i) => {
                        const conteudos = parseLinha(l);

                        console.log(conteudos);
                        return <p key={i}>{conteudos}</p>;

                })}
                {this.getUrlState()}
                    </div>
                {this.renderAttachments(item.Attachments)}
              </div>
            );
                }
                });
        export default TimelineItem;

这里的功能是:

function urlify(text){
    var urlRegex = /(https?:\/\/[^\s]+)?\.(com|pt|es|org|net|)?/g;

    return urlRegex.test(text);

这是我想要在函数urlify发生时调用的函数:

getUrlState() {
           return (               
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                        <img src="..." alt="..."/>
                            <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>...</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                            </div>
                        </div>
                    </div>
                </div>
                );
        },

真的需要你的帮助谢谢。

0 个答案:

没有答案