Tranfser реквизит родного компонента - PullRequest
Новая
       3

Tranfser реквизит родного компонента

0 голосов
/ 22 января 2020

Вместо% username% я хотел бы, чтобы текущее имя и имя отображались в фамилии модального заголовка пользователя. Я не могу сделать эту задачу. Я после решения проблемы даю идеи, как мне оптимизировать мой код.

Код: 

   
class App extends React.Component { 

  state= {
    show: false,
    };

    showModal = () =>{
    this.setState({
      show: !this.state.show
    });
  };

  render() {

    const users = this.props.data.users;
    const userList = users.map(user => <User key={user.id} user={user} onOpen={this.showModal} name={user.name} surname={user.surname}/>)
 
    return (
      <div className="container">
        {userList}
        {this.state.show ? < Modal onClose={this.showModal} show={this.state.show}/> : null}
      </div>
    )
  }
}

class User extends React.Component{

  onOpen = () => {
    this.props.onOpen && this.props.onOpen();
  };

  render(){

    const {avatar, name, surname, city, country} = this.props.user;

    return(
      <div className="box">
    <img src={avatar} alt="" className="avatar" />

    <h3 className="box-title">{`${name} ${surname}`}</h3>
    <p className="box-description">{`${city}, ${country}`}</p>

    <div className="button-wrap">
    <a href="#" className="button" onClick={()=> this.onOpen()} >Report user</a>
    </div>
  </div>   
    )
  }
}

class Modal extends React.Component { 

  onClose = () => {
    this.props.onClose && this.props.onClose();
  };

  render() {

    if(!this.props.show){
      return null;
  }
  
    // tak wygląda struktura HTML dla modal boxa
    return (
    	<div className="modal">
    	    <div className="modal-background"></div>
          <div className="modal-content">
            <div className="box">
            <h3 className="modal-title">Report user</h3>
              <textarea rows="6"></textarea>
              
              <div className="button-wrap">
                <a href="#" className="button button-link" onClick={() => {
              this.onClose()}}>Cancel</a>
                <a href="#" className="button ml-auto" onClick={()=> alert("ok")}>Report</a>
              </div>
            </div>
          </div>
    	</div>
    )
  }
}

ReactDOM.render(<App data={data} />, document.querySelector("#app"))

1 Ответ

0 голосов
/ 23 января 2020

используя состояние ReportUsr, чтобы сохранить пользователя, о котором вы хотите сообщить, который был изменен функцией this.ReportUsr в классе приложения, затем передать функцию в виде prop Report в класс пользователя, чтобы вызвать ее OnClick со значением surname для этого экземпляр компонента User

, затем модальный компонент, созданный из класса App, имеет CONTENT, который является App.state.ReportUsr 

< Modal onClose={this.showModal} show={this.state.show} >{this.state.ReportUsr}</ Modal>

LiveExample https://h4i1e.csb.app/

код https://codesandbox.io/s/modern-browser-h4i1e

...