react用formData传参

在React中使用FormData传递参数可以通过以下步骤：

1. 创建一个FormData对象

const formData = new FormData();

2. 添加参数到FormData对象中

formData.append('name', '张三');
formData.append('age', 18);

3. 发送请求时，将FormData对象作为请求的body

fetch('/api/submit', {
  method: 'POST',
  body: formData
})
.then(response => {
  console.log(response);
})
.catch(error => {
  console.error(error);
});

注意，如果要上传文件，可以将文件对象添加到FormData中，例如：

formData.append('file', fileObject);

相关问题

react hooks 路由传参

React Hooks是一种React的函数式编程方式，用于在函数组件中使用React的功能。在React中，有多种方式可以实现路由传参，其中包括params、query、state和使用React Router提供的hooks。

1. 使用params方式进行路由传参：params方式是通过在路由路径中定义参数来传递数据。可以在路由配置中定义参数，并通过路由组件的props或者useParams hook来获取传递的参数值。这种方式的优点是直观、简洁，适合传递较少的数据。但是缺点是参数是直接暴露在URL中，可能会导致安全性问题和浏览器历史记录的混乱。

2. 使用query方式进行路由传参：query方式是通过在URL的查询字符串中传递数据。可以使用React Router提供的useLocation hook来获取查询字符串并解析参数。这种方式的优点是可以传递任意数量的参数，并且参数值可以是任意类型。但是缺点是URL会变得较长，不够直观，且需要手动解析参数。

3. 使用state方式进行路由传参：state方式是通过将参数保存在组件状态中进行传递。可以使用React Router提供的useLocation hook来获取传递的参数值。这种方式的优点是可以传递复杂的数据结构，并且参数值不会暴露在URL中。但是缺点是参数值只在页面刷新后会丢失。

4. 使用React Router提供的hooks进行路由传参：React Router还提供了一些hooks，如useParams、useLocation和useMatch等，可以方便地获取路由参数。useParams用于获取params方式传递的参数，useLocation用于获取query方式传递的参数，useMatch用于获取匹配当前URL的路由信息。

根据具体需求和场景，选择合适的方式进行路由传参。如果传递的数据较少且不涉及敏感信息，可以使用params方式；如果传递的参数较多或需要保护敏感信息，可以使用query方式或state方式；如果需要方便地获取路由参数，可以使用React Router提供的hooks。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [react及hook路由传参](https://blog.csdn.net/weixin_46449470/article/details/120370287)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [ReactRouter6路由传值hooks](https://blog.csdn.net/phaple/article/details/128734513)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

React 父子组件传参

在 React 中，父组件可以通过 props 将数据传递给子组件。子组件可以通过 this.props 访问这些数据。如果需要在子组件中修改这些数据，可以通过在父组件中定义一个函数，将这个函数作为 props 传递给子组件，在子组件中调用这个函数来修改父组件中的数据。

例如，父组件中定义了一个名为 name 的 state，然后将它作为 props 传递给子组件：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'John'
    };
  }

  render() {
    return (
      <ChildComponent name={this.state.name} />
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        My name is {this.props.name}.
      </div>
    );
  }
}