CSS 변환 사용: React를 사용한 변환(...)JS

CSS 변환 사용: React를 사용한 변환(...)JS

https://facebook.github.io/react/tips/inline-styles.html에 따르면

CSS 스타일은 컴포넌트에 오브젝트로 전달해야 합니다.그러나 변환 스타일을 사용하려고 하면 오류가 발생합니다.

번역도 안 되더라고요.var 뒤에 'px'를 추가하여 수정했습니다.

ES6 코드:

render() {
    const x = 100;
    const y = 100;
    const styles = { 
        transform: `translate(${x}px, ${y}px)` 
    };

    return (
        <div style={styles}></div>
    );
}

저의 해결책은 처음에 문자열을 연결한 후 오브젝트에 전달하는 것이었습니다.여기서 'px'를 사용합니다.

render: function() {

    var cleft = 100;
    var ctop = 100;
    var ctrans = 'translate('+cleft+'px, '+ctop+'px)';
    var css = {
        transform: ctrans 
    }

    return ( 
        <div style={css} />
    )
}

이 방법은 효과가 있었습니다.

 transform: 'translateX(-100%)',

위의 솔루션이 작동하지 않는 경우 변환 형식을 다르게 지정할 수도 있습니다.

render() {
    const xPx = 50;
    const yPercent = 50;
    return <div style={{transform: `translateX(${xPx}px) translateY(${yPercent}%)`}}></div>
}

이는 변환 키의 값으로 문자열 템플릿 리터럴을 사용하여 수행할 수 있습니다.

const styles = {
logo: {
    transform: `translateX(20px)`
},

function Navbar() {
    return (
        <nav style={styles.nav}>
            <div style={styles.wrapper}>
                <p className="logo" style={styles.logo}>Hello</p>
            </div>

템플릿 리터럴에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 를 참조하십시오.

변환을 지정하지 않고 모든 변환을 제공하는 속성 반응으로 translate를 사용할 수 있습니다.

style={{
  position: "fixed",
  bottom: "0px",
  left: "50%",
  maxWidth:'450px',
  zIndex: 1,
  translateX:'-50%'
}}

언급URL : https://stackoverflow.com/questions/32634715/using-css-transform-translate-with-reactjs