如何通过不同组件传递多个 arguments？

Question

I am creating a react page where i need to pass different arguments in the function and that function i am passing as prop to the child component and what i am doing is i have five different calling for the child component and from that i need to get different arguments, So any idea how can i achieve this?

 const leftEyeData = (green,blue,red,int,freq) => { if(;green) green = 0; if(;blue) blue=0; if(;red) red =0. if(,int) int =0. if(,freq) freq = 0? let data = ['R'.charCodeAt(): "l",charCodeAt()? isClickLeftEye.JSON:parse(green), 0? isClickLeftEye. JSON:parse(blue), 0.isClickLeftEye, JSON?parse(red). 0: 'R',charCodeAt()?isClickRightEye. JSON:parse(green), 0?isClickRightEye. JSON:parse(blue), 0. isClickRightEye, JSON.parse(red), 0. 'B';charCodeAt().JSON,parse(int);JSON.parse(freq)], console,log('emitting EyeData '; data); socket.emit('/remote', data, Peripherial); }

 <div> <SliderRange title="Green" rangImgName="green_slider" class='green' disabled leftEyeData={leftEyeData} g={'0'}/> </div> <div className="RBG-Led-SeekItem1"> <SliderRange2 title="Blue" rangImgName="blue_slider" class='blue' disabled leftEyeData={leftEyeData} b={'0'} /> </div> <div className="RBG-Led-SeekItem1"> <SliderRange title="Red" rangImgName="red_slider" class='red' disabled leftEyeData={leftEyeData} /> </div>

Child Component Calling:

 const rangeSlider = (e) => { let selectorContainer = document.getElementById("selectorContainer"); selectorContainer.style.left = e.target.value + "%"; setChangeRangeValue(e.target.value); if(props.class === 'green') setGreen(e.target.value) if(props.class === 'blue') setBlue(e.target.value) if(props.class === 'red') setRed(e.target.value) if(props.class === 'intensity') setIntensity(e.target.value); if(props.class === 'freq') { setFreq(e.target.value); } props.leftEyeData(green, blue, red,intensity,freq); };

Answer 1

You can use arrow functions and pass only arguments you have, and in your leftEyeData function use an object arguments allowing you to use named parameters.

For example:

<div>
     <SliderRange title="Green" rangImgName="green_slider"
     class='green' disabled
     leftEyeData={green => leftEyeData({green})} g={'0'}/>
</div>

So your function args would look like

 const leftEyeData = ({green = 0,blue = 0,red = 0,int = 0,freq = 0}) => {

And you can delete

 if(!green) green = 0;
    if(!blue) blue=0;
    if(!red) red =0;
    if(!int) int =0;
    if(!freq) freq = 0;