Question

我一直在敲打这个问题好几个小时，可以帮忙。

从根本上说，我要做的是我有两层组件 - 当你点击它时，最后一个应该打开一个模态对话框。由于React的想法是组件应该只改变它自己的状态，我想要传播该数据并设置该变量。

这是布局。 FirstLevel.jsx文件是我的层次结构的顶部。接下来是SecondLevel.jsx和ThirdLevel.jsx，这是点击实际文字的位置。

我不知道任何事情的语法。不确定onUserInput是否是正确使用的属性，或handleUserClick是内置事物还是用户定义事物。这里的想法是我试图将回调函数handleUserClick传播到SecondLevel。到目前为止这是对的吗？

FirstLevel.jsx

export default class FirstLevel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dialogActive: ''
        };
        this.handleUserClick = this.handleUserClick.bind(this);
    }

handleUserClick(dialogActive) {
    this.setState({
        dialogActive: dialogActive
    });
}

render() {
    <SecondLevel onUserInput={this.handleUserClick}/>
}

现在，在SecondLevel上，我将回调函数进一步传播到ThirdLevel。这是到目前为止这样做的正确方法吗？

SecondLevel.jsx

render () {
    //other logic and tags before this

    <ThirdLevel onUserInput={this.props.onUserInput}/>
}

现在这个级别是所有地狱都破裂的地方，我不知道我在做什么。在单击时，我想设置向下传播的dialogActive变量，然后让它浮动。我仍然不知道onUserInput是否正确，或参数是否正确。一切都非常朦胧，因为它只是通过跟随教程和大量谷歌搜索并从各处扔掉点点滴滴。

ThirdLevel.jsx

export default class ThirdLevel extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {

        this.props.onUserInput(
            this.dialogActive.value
        );

        //show Modal dialog somehow
    }

    render() {

        return <text ref={(input) => this.dialogActive = true} onClick={this.handleClick}> {this.props.value}</text>;
    }

最后，我想展示一些模态对话框。单击文本需要显示模式对话框。模态对话框位于另一个名为MyModal.jsx

的组件中

在ThirdLevel中，我尝试导入MyModal并尝试调用showModal函数。没有工作。然后，我尝试做一些React.createElement(MyModal)的东西并渲染它，但那不起作用。所有其他的东西，我忘了，只是尝试的东西，直到它的工作，但它没有。我究竟做错了什么？

MyModal.jsx

export default class MyModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {show: false};

        this.showModal = this.showModal.bind(this);
        this.hideModal = this.hideModal.bind(this);

    }

    showModal() {
        this.setState({show: true});
    }

    hideModal() {
        this.setState({show: false});
    }

    render() {

        return (
                <Modal
                    {...this.props}
                    show={this.state.show}
                    onHide={this.hideModal}
                    dialogClassName={styles.largeDialogBox}
                >
                //more modal stuff here
           );
     }
}

大图：尝试将点击操作传播回层次结构的顶部以设置某个状态，并且单击操作需要打开模式对话框。任何帮助将不胜感激。

修改

我是否在ThirdLevel？

中执行此类操作

handleClick() {

    this.props.onUserInput(
        this.dialogActive.value
    );

    //show Modal dialog somehow
    var newmodal = new MyModal(this.props);
    React.render(React.createElement(newModal));
}

render() {
    return <text onClick={this.handleClick}> {this.props.value}</text>;
}

修改2

我的ThirdLevel渲染函数返回：

<div>
    <MyModal isDialogActive={this.props.dialogActive} onHideModal={this.props.onUserInput}/>
    <tspan onClick={this.handleClick}> {this.props.value} </tspan>
</div>

当它传回SecondLevel时，它变为：

<text>
    <div>
        <MyModal isDialogActive={this.props.dialogActive} onHideModal={this.props.onUserInput}/>
        <tspan onClick={this.handleClick}> {this.props.value} </tspan>
    </div>
</text>

在div中包装内容很奇怪，但这是使渲染工作的唯一方法。尽管生成的DOM中包含所有标记，但实际的tspan都没有显示。

Answer 1

我相信这会让你走上正确的道路。

我建议重构一些函数的名称，因为它确实有点令人困惑。 TrySetViewBoundsAsync然后handleUserClick等等。但您已经在OP中提到了这一点。

onUserInput

但是我会问你为什么在// First Level export default class FirstLevel extends React.Component { constructor(props) { super(props); this.state = { dialogActive: false }; this.handleUserClick = this.handleUserClick.bind(this); } handleUserClick(dialogActive) { this.setState({ dialogActive: dialogActive }); } render() { <SecondLevel onUserInput={this.handleUserClick}/> } } // Second Level ... render () { //other logic and tags before this <ThirdLevel onUserInput={this.props.onUserInput}/> } ... // Third Level export default class ThirdLevel extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { this.props.onUserInput(true); } render() { return ( <div> <MyModal isDialogActive={this.props.dialogActive} onHideModal={this.props.onUserInput} /> <button onClick={this.handleClick}>Show Modal</button> </div> ) } } // Modal export default class MyModal extends React.Component { constructor(props) { super(props); this.hideModal = this.hideModal.bind(this); } hideModal() { this.props.onUserInput(false); } render() { return ( <Modal {...this.props} show={this.props.isDialogActive} onHide={this.hideModal} dialogClassName={styles.largeDialogBox} > //more modal stuff here ); } }中需要这个逻辑，它不能在组件树的下面。

通过级别传递数据 - 最后打开模态对话框

1 个答案: