Question

我想传递布尔状态以将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>);
}
}

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

Answer 1

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

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

但是我没有看到您导入子组件（Main）或在父组件的渲染功能中使用它（Category）。

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

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

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

Answer 2

在React文档中，每个React's Thinking，道具是一种将数据从父级传递给子级的方式。＆＃34;

对于您的示例，父组件Gallery必须在渲染功能中包含子组件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>
        );
     }
  }

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

2 个答案: