Question

我使用函数来创建react组件，作为回报，我已经拥有了按钮和隐藏的对话框。我希望调用一个函数，该函数根据用户按下的按钮返回必须在对话框中创建的项目。我以为我可以直接在对话框标签内插入函数调用{generationivcont（whatGenerate）}……或者让按钮调用将其值传递给它的函数...但是然后我不知道如何将我的json obj返回到对话框内部。不使用DOM..innerHtml ... 有人可以帮我吗？

Answer 1

一个简单的技巧是可以将布尔值和组件组合在一起。

{true && <IllBeShown />}
{false && <NothingToSee />

JS一旦遇到false，就会停止解析，因此不会呈现该组件。
当然，这样不是很方便，但是您可以使用返回布尔值或布尔变量的函数来替换布尔值：

Class Example extends React.Component{
    constructor(props){
        this.state = { isShown: false}
    }
    render(){
        return(
            {this.state.isShown && <Dialog />}
            <button onPress={()=>this.setState({isShown: true})}>Open</button>
        );
    }
}

如果您想将信息从<Dialog />传递回<Example />，则可以通过为此传递一个函数来实现。另外，很容易从模式内部关闭模式：

Class Example extends React.Component{
    checkAndSaveData(data){
       // Something with the data:
       console.log("we've got something: ", data);
    }
    render(){
        return(
            <Dialog
                // In Dialog, to close: this.props.closeModal():
                closeModal={()=>this.setState{isShown:false}} 

                // bit weird name, but this ways it's more obvious to which function we point
                saveData={this.checkAndSaveData}
                settings={{color: 'blue', number: 42}}
            />
        );
    }
}
Class Dialog extends React.Component{
    render(){
        console.log("ww've gotten these settings: ", this.props.settings);
        const exampleData = {a:1, b:2, c:4, d:8};
        return (
            <div>
                <button onPress={()=>this.props.saveData(exampleData)}>saveData</button>
                <button onPress={this.props.closeModal}>Close</button>
            </div>
        );
    }
}

*注意：我是从脑海写的，未经测试

如何根据按下的按钮生成<dialog>内容？

1 个答案: