将多个参数传递给React中的函数

时间:2018-07-08 11:56:09

标签: javascript reactjs function components

如何在React中将多个参数传递给函数?

以下内容似乎很有意义,但只有数据正在检索正确的信息。级别已定义,但只是一个空对象。

<OutputContent data = { this.props.data } level = {0} />

function OutputContent({data}, level) {
    console.log(data);
    console.log(level);
    return <p>A simple example</p>
}

2 个答案:

答案 0 :(得分:6)

像您编写的组件那样的无状态功能组件将所有道具作为第一个参数。

function OutputContent(props) {
  console.log(props.data);
  console.log(props.level);
  return <p>A simple example</p>;
}

因此,如果要使用解构,请确保从同一个对象解构所有道具。

function OutputContent({data, level}) {
  console.log(data);
  console.log(level);
  return <p>A simple example</p>;
}

答案 1 :(得分:0)

此外,当您的参数不仅是对象而且是不同类型时。

功能:

onChangeAddress = (e, flag) => {

     console.log(e.target.value);
     console.log(flag);
}

来电者

onChange={(e)=>this.onChangeAddress(e, 'r')}

HTML代码

<Radio.Group onChange={(e)=>this.onChangeAddress(e, 'r')}>
    <Radio value={"Home"}>
        {language.switchValue?'Home Address':'বাসার ঠিকানা'}
    </Radio>
    <Radio value={"Office"}>
         {language.switchValue?'Office Address':'অফিসের ঠিকানা'}
    </Radio>
    <Radio value={"Other"}>
       {language.switchValue?'Other Address':'অন্যান্য ঠিকানা'}
    </Radio>
    <Radio value={"localPickup"}>
         {language.switchValue?'Pickup from Mall':'শপিং মল থেকে পিকআপ'}
    </Radio>
</Radio.Group>