Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

image.png

页面设计如图所示,组件1,2,3都是自定义组件,想通过一定条件比如点击按钮、拖拽,调换某两个组件的位置,代码应该如何设计呢?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
1.4k views
Welcome To Ask or Share your Answers For Others

1 Answer

可以通过flex的order属性试试
`
<style>

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .container {
        display: flex;
        flex-direction: column;
    }
</style>

`

`
const { Fragment, useState, useCallback } = React;

    function createTestComponent() {
        return ({ sign, ...others }) => (
            <div {...others}>
                {sign}
            </div>
        )
    }
    const [App1, App2, App3] = [createTestComponent(), createTestComponent(), createTestComponent()];
    const App = props => {
        const [orders, setOrders] = useState([1,2,3]);
        const changeHandle = useCallback(e => {
            const value = e.target.value;
            if (/^(?:d,){2}d$/.test(value)) {
                const arr = value.split(',').map(Number);
                setOrders(arr);
            }
        }, []);
        return (
            <Fragment>
                <div className="container">
                    <App1 style={{order: orders[0]}} sign={1} />
                    <App2 style={{order: orders[1]}} sign={2} />
                    <App3 style={{order: orders[2]}} sign={3} />
                </div>
                <input onChange={changeHandle}/>
            </Fragment>
        )
    }
    ReactDOM.render(<App />, document.body);

`


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...