усеченный текст в reactJS

Привет Я работаю в этой reactJS компоненте, и я хочу знать, если reactJS имеет возможности фильтровать содержимое строки:усеченный текст в reactJS

var Album = React.createClass({ 
    rawMarkup: function() { 
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 
    return { __html: rawMarkup }; 
}, 

render: function() { 

    return (
    <div className='col s12 m6 l4'> 
     <div className='card'> 
     <div className='card-image'> 
      <img style={{minHeight:'220px', maxHeight:'220px' }} src={this.props.image} /> 
     </div> 
     <div className='card-content' style={{minHeight:'100px', maxHeight:'100px'}}> 
      <span style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>    
      {this.props.name} 
      </span> 
     </div> 
     <div className='card-action'> 
     </div> 
     </div>   
     </div> 
    ); 
    } 
});

Как укоротить текст внутри тега диапазона ??

рассматривает

источник

2016-01-18 dev-yohan

Вы пытаетесь достичь этого только с помощью CSS? (глядя на встроенные стили вашего диапазона) Реагент сам не предлагает способ усечения строки. Вы можете вызвать this.props.name.substring (0, n), чтобы вернуть часть строки. –

вы можете использовать метод truncate напрямую. Реагирование - это только библиотека Javascript, вы можете напрямую использовать язык. – kalelc

Не могли бы вы создать пример скрипта, потому что, поскольку я знаю, что React не позволяет вам добавить пробел между элементами html, он автоматически обрезает эти пробелы. Мой [пример скрипки] (https://jsfiddle.net/69z2wepo/29918/) –

Вы можете передать prop функционировать и вернуть усеченный вариант:

... 

<span style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>    
    {this.truncate(this.props.name)} 
</span> 

... 

truncate: function(s) { 
    /* if (s.length() > 10) 
     return truncated value; 
     else 
     return s; */ 
}

источник

2016-04-16 22:24:48 aashah7

здесь одно решение, которое может работать для вас:

React.createClass({ 
    ... 
    myFilter: function(data) { 
    return data.sanitize() 
    }, 
    render: function() { 
    return (
     <div>{this.myFilter(this.props.myData)}</div> 
    ) 
    } 
})

вы можете вводить блоки кода в ваши JSX используя {}. устанут, хотя, как JSX довольно привередливы о том, что он принимает в этих блоках

источник

2016-02-02 21:52:25 avocadojesus

усеченный текст в reactJS

ответ

Смежные вопросы