时间戳

首页 > 解决方案 > 将 props 传输到同级组件

javascript - 将 props 传输到同级组件

问题描述

我希望当前名称和名称显示在模态标题用户的姓氏中，而不是％用户名％。我不能完成这个任务。解决问题后，我给出了如何优化代码的想法。

代码：

   
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"))

标签： javascriptreactjsreact-props

解决方案

使用状态ReportUsr来存储您要报告的用户，由this.ReportUsrApp 类中的函数更改，然后将函数作为道具传递给 User 类以使用该User 组件实例 的值Report调用它OnClicksurname

然后从 App 类创建的模态组件具有内容，即 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

推荐阅读