传递道具和状态对象并让子组件移动父组件

Question

该按钮是 Form1 的子组件。我的表格 1：

export default function Form1(props, {transform}){
  return (
    <div id='Form1' style={{transform: transform}}>
              
             //Lots of html code..

              {props.children}
    </div>   
  )
}

在我的 App.js 中，我有以下内容：

const [activeStep, setActiveStep] = React.useState(0);
      function handleNext(){
          setActiveStep(activeStep+1);
        };

  const [transform, transformit] = React.useState("TranslateX(0px)");
  
  function fram() {  
    transformit("TranslateX(-740px)");
  };
 <Form1 transform={transform}>
               
   <Button onClick={() => {handleNext();fram();}}>NEXT</Button> 
                
 </Form1>

问题是我将 props 和 {transform} 都传递到 Form1 中，而 Form1 又不允许 {transform} 操作 Form1 样式的对象。

我已经卡在这里一段时间了，有什么方法可以将两者都传递到 form1 中吗？

Answer 1

如果将 Form1 更改为

function Form1(props){
    return (
       <div id='Form1' style={{transform: props.transform}}>    
            {props.children}
        </div> 
}

这对我有用。 transform 和 children 都出现在道具中。

Answer 2

export default function Form1({transform,...props}){
  return (
    <div id='Form1' style={{transform: transform}}>
              
             //Lots of html code..

              {props.children}
    </div>   
  )
}

这样改参数应该没问题

传递道具和状态对象并让子组件移动父组件

pass both props and a state object and let child component move parent component

state

reactjs

react-hooks

use-state