Question

我想创建Dropdown组件。

当我点击DropdownHandler组件时，我想保存状态isOpen，即true或false。如果true，state使用相同的<DropdownContent/>来显示内容。默认情况下，state组件中的isOpen false为<Dropdown />

我该怎么办呢？

App.jsx

import React from 'react';
import {Dropdown, DropdownHandler, DropdownContent} from '../../components/Dropdown/Dropdown.jsx';

class HeaderConnected extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
              <Dropdown>
                 <DropdownHandler>
                     <Avatar title="Roberto"></Avatar>
                 </DropdownHandler>
                 <DropdownContent>
                     <li>Menu</li>
                     <li>Settings</li>
                 </DropdownContent>
               </Dropdown>
            </div>
        );
    }

}

export default HeaderConnected;

Dropdown.jsx

export class Dropdown extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            opened: false
        }
    }

    render() {

        return (
            <div className="DROPDOWN">
                {this.props.children}
            </div>
        );
    }

}

export class DropdownHandler extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {

        return (
            <div className="DROPDOWN__HANDLER">
                {this.props.children}
            </div>
        );
    }

}

export class DropdownContent extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {

        return (
            <div className="DROPDOWN__CONTENT">
                {this.props.children}
            </div>
        );
    }

}

Answer 1

如果您不想使用redux。您可以设置和控制子组件的opend状态，并使用props将其设置为DropdownContent。因此，当您通过单击DropdownHandler更改opend时，DropdownContent将重新启动新的propse并调用重新渲染。

for(Object k:keys){
    String key = (String)k;     
    String [] mapValue = Properties.getProperty(key).split(",");
    List<String> lList=Arrays.asList(mapValue);
    if(key.startsWith("view") &&(lList.contains(tmpSrc.getSourceTableForUpdate()))){        
        dest.seteQuery(Properties.getProperty("")); // here i need to get the query1 value.
    }
}

Answer 2

我找到了一个基于@Andrew答案的解决方案。不确定这是否正确。但它解决了共享状态，仅由Dropdown使用。我通过道具传递处理程序和内容

您怎么看？

App.jsx

import React from 'react';
import {Dropdown} from '../../components/Dropdown/Dropdown.jsx';

class HeaderConnected extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
              <Dropdown handler={<Avatar title="Roberto" />}>
                  <li>Menu</li>
                  <li>Settings</li>
              </Dropdown>
            </div>
        );
    }

}

export default HeaderConnected;

Dropdown.jsx

export class Dropdown extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            opened: false
        }
    }

    render() {

        return (
            <div className="DROPDOWN">
               <div className="DROPDOWN_HANDLER" onClick="...">
                   {this.props.handler}
               </div>
               <div className="DROPDOWN_CONTENT">
                   {this.props.children}
               </div>
            </div>
        );
    }

}

Answer 3

随意更改回拨“onOpen”的名称

export class Dropdown extends React.Component {

    state = {
        open: false
    }

    handleOpen = () => {
        this.setState({open: !this.state.open});
    } 

    render() {

        return (
            <div className="DROPDOWN">
                {React.cloneElement(this.props.children, { open: this.state.open, onOpen: this.handleOpen })}
            </div>
        );
    }

}

export class DropdownHandler extends React.Component {

    static propTypes = {
      open: React.PropTypes.bool.isRequired,
      onOpen: React.PropTypes.func.isRequired
    }

    render() {

        return (
            <div className="DROPDOWN__HANDLER" onClick={this.props.onOpen}>
                {this.props.children}
            </div>
        );
    }

}

export class DropdownContent extends React.Component {

    static propTypes = {
      open: React.PropTypes.bool.isRequired,
      onOpen: React.PropTypes.func.isRequired
    }

    render() {
        // handle visibility here
        return (
            <div className="DROPDOWN__CONTENT">
                {this.props.children}
            </div>
        );
    }

}

React JS中单独组件之间的共享状态如何？

3 个答案: