将布尔状态从一个组件传递到另一个组件 React.JS答案

【问题标题】：Passing Boolean State from one component to another component React.JS将布尔状态从一个组件传递到另一个组件 React.JS
【发布时间】：2018-02-19 22:59:48
【问题描述】：

我想通过布尔状态将 className 从一个组件更改为另一个组件。我试图通过 {this.props.isOpen} 传递它，但它不起作用。如何将状态值传递给另一个组件？

父组件

class Category extends React.Component {
constructor(props) {
     super(props);
     this.state={ isOpen: false };
     this.handleClick = this.handleClick.bind(this);
    }

handleClick() {
this.setState({ isOpen : !this.state.isOpen })
}

render() {

const categoryContainer = this.state.isOpen ? "isopen" : "";
return(
<div>
<div className="categoryContainer">
    <h3>CATEGORIES</h3>
</div>
<button onClick={this.handleClick}>Click</button>
</div>
<div className={categoryStatus} id="category">
<input className="categoryInput" type="text" value="Add Category" placeholder="Add Category" /> 
    <ul>
    <li>Greetings</li>
    <li>Main Switchboard</li>
    <li>Interjections</li>
 </ul>
 </div>
 <Main isOpen={this.state.isOpen} />
 </div>
 )}
}

子组件

class Main extends React.Component {

render() { 
const botStatus = !this.props.isOpen ? "isopen" : "";
const botInput = !this.props.isOpen ? "isopen" : "";
return (
<div>
<div className={botStatus} id="bot">
    <h2>MASTER INTENTS</h2>
    <input className={botInput} type="text" value="Add Intent" />

</div>
</div>);
}
}

感谢您提前检查我的问题。

【问题讨论】：

我看不到 Category 在哪里消耗 Main。您通常会通过从 Parent 向 Child 传递一个 prop 来做到这一点。

标签： reactjs boolean components

【解决方案1】：

每当您想将 prop 从父组件 (Category) 传递给子组件 (Main) 时，您将其传递到 render() 函数中：

render(){
  <Main
   isOpen={this.state.isOpen}
  />
}

但我根本没有看到您导入子组件 (Main) 或在父组件 (Category) 的渲染函数中使用它。

您需要在父组件的渲染函数中使用子组件，以便将父组件的state（甚至props）传递给其子组件。

您也可以从React Docs 获得更多信息。

https://facebook.github.io/react/docs/components-and-props.html

【讨论】：

感谢您的评论。我想通过将状态从父母传递给孩子来使它在这部分工作const botStatus = !this.state.isOpen ? "isopen" : ""; const botInput = !this.state.isOpen ? "isopen" : "" 。我用你的解决方案试过了，但没有用。该值也没有在控制台中打印出来..
你能在Category组件的渲染函数中显示你在passing the prop from parent to the child component的部分的sn-p吗？或更新问题并让我们知道。 @ayumi
我将您的 sn-p 添加到“类别”组件中，但该组件还不能正常工作..
最后我将子组件集成到父组件中以使其工作。我知道这不是理想的解决方案。无论如何，谢谢您的建议。

【解决方案2】：

根据 React 文档中的 React's Thinking，道具是“一种将数据从父级传递给子级的方式。”

对于您的示例，parent 组件 Gallery 必须在 render 函数中包含 child 组件 Main 才能使其工作。

class Main extends Component {
    render() { 
      const botStatus = this.props.isOpen ? "isOpen" : "noOpen";  
      return (
      <div>
          <div>
            <h1>{botStatus}</h1>
          </div>
       </div>
      );
    }
  }

class Gallery extends Component {
  constructor() {
       super();
        this.state = {
        isOpen: false
        };
       }

  render() {
        return(
          <div>
            <div>

                <Main isOpen={this.state.isOpen}/>

            </div>
          </div>
        );
     }
  }

【讨论】：