Javascript 如何制作一个可以从外部控制的反应组件？

我正在尝试使用React和materialui创建一个对话框组件

现在，我使用了MaterialUI对话框的传统行为，在类中有一个按钮可以打开对话框。但我希望该组件的行为与“材质UI”对话框的行为相同

所以我想改变他的状态并重新渲染组件，如下所示调用它：

var open = false;
<AuthDialog open={open} />

...
render() {
    const { open, onRaisedButtonClick } = this.props;
    return (
        <div>
            <RaisedButton children="login" onTouchTap={ onRaisedButtonClick } />
            <Dialog open={open} onRequestClose={this.handleRequestClose}>
                // Content
            </Dialog>
        </div>
    );
}
...

var open=false；

并使用外部按钮将打开变量更改为true

这是我的代码：

class AuthDialog extends React.Component {
    constructor(props, context){
        super(props, context);

        this.state = {
           open: false,
        };
    };

    handleRequestOpen = () => {
        this.setState({
            open: true,
        });
    };

    handleRequestClose = () => {
        this.setState({
            open: false,
        });
    };

    render() {
        return (
        <div>
            <RaisedButton children="login" onTouchTap={ this.handleRequestOpen } />
            <Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
                // Content
            </Dialog>
        </div>
        );
    }
}

类AuthDialog扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
开：错，
};
};
handleRequestOpen=（）=>{
这是我的国家({
开放：是的，
});
};
HandlerRequestClose=（）=>{
这是我的国家({
开：错，
});
};
render（）{
返回(
//内容
);
}
}

我是JS的初学者，所以如果我的代码在某个地方不正确，我也会很感激一些评论

编辑：这是我修改后的代码：

class AuthDialog extends React.Component {
    constructor(props, context){
        super(props, context);

        this.state = {
            // State of authBody
        };  
    };

    render() {
        const { onRequestClose, open } = this.props;

        return (
            <Dialog open={open} onRequestClose={onRequestClose}>
                // Body of the dialog
            </Dialog>
        );
    }
}

类AuthDialog扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
//主体状态
};  
};
render（）{
const{onRequestClose，open}=this.props；
返回(
//对话框的主体
);
}
}

在家长中：

closeAuthDialog = () => {
    this.setState({
        openAuthDialog: false,
    });
}

openAuthDialog = () => {
    this.setState({
        openAuthDialog: true,
    });
}

<RaisedButton children="login" onTouchTap={ this.openAuthDialog } />
<AuthDialog open={this.state.openAuthDialog} onRequestClose={this.closeAuthDialog} handleLoginSuccess={ this.handleLoginSuccess } />

closeAuthDialog=（）=>{
这是我的国家({
openAuthDialog:false，
});
}
openAuthDialog=（）=>{
这是我的国家({
openAuthDialog:true，
});
}

只需从

中获取属性即可。道具如下所示：

var open = false;
<AuthDialog open={open} />

...
render() {
    const { open, onRaisedButtonClick } = this.props;
    return (
        <div>
            <RaisedButton children="login" onTouchTap={ onRaisedButtonClick } />
            <Dialog open={open} onRequestClose={this.handleRequestClose}>
                // Content
            </Dialog>
        </div>
    );
}
...

。。。
render（）{
const{open，onRaisedButtonClick}=this.props；
返回(
//内容
);
}
...

另外，当您有没有生命周期方法的无状态组件时，您可以使用功能组件；它更简单易读：

const AuthDialog = ({ open, onRaisedButtonClick }) => (
    <RaisedButton children="login" onTouchTap={ onRaisedButtonClick } />
    <Dialog open={open} onRequestClose={this.handleRequestClose}>
        // Content
    </Dialog>
)

const AuthDialog=（{open，onraisedbutonclick}）=>(
//内容
)
为了实现这一点，您需要使用
道具而不是本地状态

class AuthDialog extends React.PureComponent {
    static propTypes = {
      open: React.PropTypes.bool.isRequired,
      onClose: React.PropTypes.func.isRequired,
      onOpen: React.PropTypes.func.isRequired,
    };

    render() {
      const { onClose, onOpen, open } = this.props;

      return (
        <div>
            <RaisedButton children="login" onTouchTap={onOpen} />
            <Dialog open={open} onRequestClose={onClose}>
                // Content
            </Dialog>
        </div>
      );
    }
}

class AuthDialog扩展了React.PureComponent{
静态类型={
打开：React.PropTypes.bool.isRequired，
onClose:React.PropTypes.func.isRequired，
onOpen:React.PropTypes.func.isRequired，
};
render（）{
const{onClose，onOpen，open}=this.props；
返回(
//内容
);
}
}

然后从父类发送两个函数和open prop

<AuthDialog open={open} onOpen={this.toggleOpenToTrue} onClose={this.toggleOpenToFalse} />

我不确定你到底在找什么。但据我所知，您希望像这样使用AuthDialog组件

<AuthDialog open={open} />



单击
时，您需要显示
，还需要更改父级上的'open'状态/var

在这种情况下，您需要使用Flux或Redux来管理您的应用程序状态。因为React中的双向绑定是一种糟糕的做法，这将是实现这一点的最佳途径
 谢谢，这就是我需要的。但最后我没有使用道具，我只是做了@Yuriy Yakym发布的东西。propTypes似乎已被弃用，我不想添加太多库。您使用@Yuriy Yakym建议的无状态组件非常好，但即使这样，您也应该为该组件定义propTypes。从
import-React获取PropTypes对象，从'React'
获取{PropTypes}对象是不推荐的，因为有一个新的通用包叫做
prop-types
->
import-PropTypes from'prop-types'
，您应该明确地在无状态组件上定义PropTypes谢谢您的回答，我不需要双向绑定（现在还没有）。我只是想把所有的控件传递到外部，并从AuthDialog中删除按钮。多亏了Crysfel和Yuriy的帖子，我实现了这一点。太棒了，arracso！