Question

我知道这可能是关于React的最常见的问题，但是没有一个答案对我有帮助。

我有2个课程：

孩子

class Preview extends Component {
constructor(...args) {
        super(...args);
        this.state = {
            isCommentOpen: false
        };
this.handleComment = ::this.handleComment;

render() {
return(
button type="button" onClick={this.handleComment}>Comment</button>
         )}
handleComment(){
        this.setState({isCommentOpen: !this.state.isCommentOpen});
               }        
export default Preview;

父母

class Profile extends Component {
 render(){
        return(
        <div>
             <_.Preview />
//the place where I want to add validation from the component above
             {this.state.isCommentOpen ? <span>Cool</span> : null}
       </div>
}

Answer 1

您不应变异或直接分配this.props，如其他答案所示：

this.props.isCommentOpen = !this.props.isCommentOpen // <-- DON'T DO THIS! ?

相反，您应该具有一个回调函数，以允许Parent组件更新子组件：

class Profile extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isCommentOpen: false;
    }
    this.handleComment = this.handleComment.bind(this); // <-- important!
  }

  handleComment() {
    this.setState({ isCommentOpen: !this.state.isCommentOpen });
  }

  render() {
    return (
      <div>
        <Preview handleComment={this.handleComment} />
        { this.state.isCommentOpen ? <span>Cool</span> : null }
      </div>
    )
  }
}

export default Profile

然后，子组件仅需要调用this.props.handleComment：

// Child Component:
class Preview extends Component {

render() {
  return(
    <button type="button" onClick={this.props.handleComment}>Comment</button>
  }
}

export default Preview;

Answer 2

您可以将状态从父母传递给孩子作为道具。道具更新后，父组件中的状态也将更新。

我没有测试以下代码。这是你要的吗？

 Select distinct ID 
 INTO #FinalTable
 from #RAM a join #ROM b on a.id = b.id

将状态从子类传递给父类

2 个答案: