Как использовать функцию cal c css в реакции визуализации

Question

Привет, у меня есть проблема, чтобы использовать Cal c в моей функции рендеринга в реагировать.

    render() {
        let top =0;
        let left =0;
        if(this.props.top !==undefined){
            top=this.props.top;
        }
        if(this.props.left !==undefined){
            left=this.props.left;
        }

        let topval = `calc(50% + ${top})`, leftval = `calc(50% + ${left })`;
        console.log(topval);
        console.log(leftval);
        return (
            <div className={"d-flex flex-column justify-content-center text-center position-absolute loading-animation"}
            style={{top:topval,left:leftval,transform:("translate(-50%,-50%)")}}>
                <div>
                    <Spinner animation="grow" variant="success" />
                    <Spinner animation="grow" variant="danger" />
                    <Spinner animation="grow" variant="warning" />
                </div>
                <span>{this.props.loadingMessage}</span>
            </div>
        );

Это то, что я пытаюсь сделать. Если я получаю реквизит сверху или слева, мне нужно прибавить это значение до 50% сверху и слева. Мой пример выше не работает, и он просто игнорирует атрибуты top и left в моем стиле.

Answer 1

Во-первых, вам нужно убрать скобки () из свойств. Затем вы можете вычислить их за пределами return:

render(){
    // Assuming values are in pixels
    let topval = `calc(50% + ${top}px)`, leftval = `calc(50% + ${left}px)`;

    // rest of the code

    return(
        <div 
           style={{top: topval, left: leftval, transform: "translate(-50%,-50%)"}}
        />
    )
}

Также убедитесь, что вы добавили единицы, такие как px, em et c. при работе с ненулевыми значениями css является недействительным.

Например, calc(50% - 10) не так, calc(50% - 10px) работает

Answer 2

Вы можете использовать Строки шаблона , чтобы решить эту проблему

style={{ top: `calc(50% + ${top})`, left: `calc(50% + ${left})` }}