代码之家 › 专栏 › 技术社区 › JJNL77

this.props.chatVisible未定义

reactjs

JJNL77 · 技术社区 · 6 年前

我想使用类chattilebutton中的chatVisible道具。但是当我console.log(this.props.chatVisible)时,我将得到未定义的。我也不知道为什么我一直没有定义。因为它必须作为布尔函数,所以react可以根据该变量呈现要呈现的html。我希望有人能帮助我

import ChatTitleButton from "./ChatTitleButton";

class Chat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      chatVisible: true,
    };
  }
  render() {
    return ( 
    <div classname = "chat-widget" >
      <ChatTitleButton / >
    </div>
    )
  }
}

import React from 'react';

export default class ChatTitleButton extends React.Component {
  render() {
    if (this.props.chatVisible === true) {
      return ( <
        div className = "chat-title-close" >
        <
        button onClick = {
          this.closeChat
        }
        className = "btn chat-close" > Chat beindigen < /button> <
        /div>

      )
    } else {
      return ( <
        div className = "chat-title-close" >
        <
        button onClick = {
          this.openChat
        }
        className = "btn chat-close" > Chat openen < /button> <
        /div>
      )
    }

  }
}

5 回复 | 直到 6 年前

Prasanna 6 年前

您没有将道具传递给组件。在呈现语句中而不是 <ChatTitleButton /> 使用 <ChatTitleButton chatVisible={this.state.chatVisible}/> .

Shubham Khatri 6 年前

chatVisible 未传递给 ChatTitleButton ,需要将其作为道具传递才能在子对象中访问它。

render() {
    return ( 
    <div classname = "chat-widget" >
      <ChatTitleButton chatVisible={this.state.chatVisible}/ >
    </div>
    )
  }

Naramsim 6 年前

你真的需要通过道具。你应该把它作为一个参数放在jsx标签中

import ChatTitleButton from "./ChatTitleButton";

class Chat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      chatVisible: true,
    };
  }
  render() {
    return ( 
    <div classname = "chat-widget" >
      <ChatTitleButton chatVisible={this.state.chatVisible} / >
    </div>
    )
  }
}

Jee Mok ecanf 6 年前

你必须通过 chatVisible 进入组件:

import ChatTitleButton from "./ChatTitleButton";

class Chat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      chatVisible: true
    };
  }

  render() {
    const { chatVisible } = this.state;
    return ( 
      <div classname="chat-widget">
        <ChatTitleButton chatVisible={chatVisible} />
      </div>
    )
  }
}

Bhavin Solanki 6 年前

你必须使用道具将一个组件的状态转移到另一个组件 Ref

import ChatTitleButton from "./ChatTitleButton";

class Chat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      chatVisible: true,
    };
  }
  render() {
    return ( 
    <div classname = "chat-widget" >
      <ChatTitleButton 
        chatVisible={this.state.chatVisible} // updated code
      / >
    </div>
    )
  }
}