Question

我有一个通知气泡，应该链接到聊天界面。

我试图在气泡所在的链接中传递聊天状态，但是没有运气。

class NotifBubble extends Component {

    componentWillMount() {
        this.pathname = "/chat/" + this.props.merchant.id
        if (this.props.merchant.id === 0) {
            this.pathname = '#';
        }

    }

    render() {
        if (typeof this.props.merchant === 'undefined') {
            return <div></div>
        }
        return (
            <Link className="notif-bubble-link" to={{
                pathname: this.pathname,
                state: { merchant: this.props.merchant }
            }}><div className="notif-bubble slide-in-right">
                    {this.props.message}
                </div></Link>
        );
    }
}

export default NotifBubble;

一切正常，直到我将状态this.props.merchant传递到链接中为止。不过，this.props.merchant绝对正确。

我在这里做错了什么以致无法正确通过状态？

Answer 1

请勿使用this.pathname存储组件状态。使用提供的React State API。

此外，最好在构造函数中初始化状态（与componentWillMount相对）

class NotifBubble extends Component {
  constructor(props) {
    super(props);

    const pathname = props.merchant.id === 0 ?
      '#' : `/chat/${props.merchant.id}`;

    this.state = {
      pathname
    };
  }

  render() {
    if (typeof this.props.merchant === 'undefined') {
      return <div > < /div>
    }
    return ( <
      Link className = "notif-bubble-link"
      to = {
        {
          pathname: this.state.pathname,
          state: {
            merchant: this.props.merchant
          }
        }
      } > < div className = "notif-bubble slide-in-right" > {
        this.props.message
      } <
      /div></Link >
    );
  }
}

export default NotifBubble;

Answer 2

要传递对象，您需要先stringify个对象，

<Link className="notif-bubble-link" 
    to={{pathname: this.pathname,
         state: { merchant: JSON.stringify(this.props.merchant)}
       }}>
   <div className="notif-bubble slide-in-right">
         {this.props.message}
   </div>
</Link>

要访问state，

const merchant = JSON.parse(this.props.location.state.merchant)

无法在React路由器链接中传递状态

2 个答案: