Question

我想在ChatTitleButton类中使用chatVisible道具。但是当我在console.log（this.props.chatVisible）;我会得到不确定的。而且我不知道为什么我一直不明确。因为它必须作为布尔函数运行，所以React可以根据该变量呈现要呈现的html。我希望有人可以帮助我

bars

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

Answer 1

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

Answer 2

chatVisible未传递给ChatTitleButton，您需要将其作为道具传递，以便在孩子中访问它。

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

Answer 3

您必须使用道具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>
    )
  }
}

Answer 4

你实际上需要传递道具。您应该将它作为参数放在JSX标记

中

$query  = explode('&', $_SERVER['QUERY_STRING']);
                $params = array();
                if(!empty($query[0])){
                    foreach( $query as $param ){
                    list($name, $value) = explode('=', $param, 2);
                    $params[urldecode($name)][] = urldecode($value);
                    }
                }

Answer 5

您必须将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>
    )
  }
}

this.props.chatVisible是'undefined'

5 个答案: