Передача реквизита в реакцию и подстроку его в другом компоненте - PullRequest
Новая
       30

Передача реквизита в реакцию и подстроку его в другом компоненте

0 голосов
/ 29 февраля 2020

Я пытаюсь создать текстовый профиль профиля, который будет иметь возможность читать больше / меньше в зависимости от его длины, вызывая функцию из дома как 

<AboutText text={aboutData}/>

Компонент AboutText 

import React from 'react';
    import './profile.css';
      import 'bootstrap/dist/css/bootstrap.min.css';
      import 'font-awesome/css/font-awesome.min.css';
     class AboutText extends React.Component {

state = {
    showAll : false
}
showMore = () => {this.setState({showAll : true})};
showLess = () => {this.setState({showAll : false})};

 render(){
    const {text} = this.props;
    if(text.length <= 150 ){
    return(

 <p className="about p-3 mt-2 text-dark">{text}</p>

    )
    }
    if(this.state.showAll) {

        return (<React.Fragment>
            <p className="about p-3 mt-2 text-dark">{text}
            <a className="ml-3" onClick={this.showLess}>Read less</a></p>
        </React.Fragment>
         ) }
         const toShow = text.substring(0,150)+".....";
         return <div>
              <p className="about p-3 mt-2 text-dark">{toShow}
             <a className="ml-3" onClick={this.showMore}>Read more</a></p>
         </div>

    } }


     export default AboutText;

когда я передаю прямые данные в качестве реквизита, он отлично работает 

     <AboutText text="some long string"/>

, но не работает при передаче состояния в виде реквизита .. он показывает различные ошибки типа text is undefined подстрока не является функцией .. заранее спасибо

Ответы [ 2 ]

1 голос
/ 29 февраля 2020

Если вы хотите использовать text из State, вам нужно инициализировать его в конструкторе, как показано ниже: 

constructor(props) {
    super(props);
    this.state = {
        showAll : false,
        text: props.text
      }
}

Теперь вы можете использовать text из State in render как показано ниже: 

render() {
   const { text } = this.state;
   ...
}
1 голос
/ 29 февраля 2020

это не достаточно ясно! но, прежде всего, попробуйте объявление React.Component<aboutData:String> перед его передачей и сделать: 

constractor(){
super(props)
....
}
...