最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can I destructure a React prop and still access other props? - Stack Overflow

programmeradmin1浏览0评论

I'm curious if the parameters(props) of a ponent can be de-structured similarly to an import if I want all the props but also to de-structure a single property. I guess this is more of a JavaScript question than a React question, but for example.

import React, {useEffect} from 'React'

I understand that an import is different than what I'm asking but I'm just using as an example. Is something like the following possible?

const props = {
  test: true,
  destructure: 'yes'
}

const TestComponent = (props, {desctructure}) => {
  return <div>Not Important, but not having a return bothered me enough to add it</div>;

I'm well aware that I can do this:

const TestComponent = (props) => {
  const { destructure } = props;
  return <div>Another return</div>;

My reasoning for why this would be useful:

When navigating through large and overly plex ponents, I feel like the first option would make reading props much easier as it would stick out that these values are ing from props. Of course, a prop value could be written as props.destructure, but this almost feels like too much boilerplate if there's a lot of references.

I've been wondering this for a long time now and I really just want to make sure I'm not missing something simple here. I'm perfectly fine for doing the latter and I'm not looking for some custom implementation on this.

I'm curious if the parameters(props) of a ponent can be de-structured similarly to an import if I want all the props but also to de-structure a single property. I guess this is more of a JavaScript question than a React question, but for example.

import React, {useEffect} from 'React'

I understand that an import is different than what I'm asking but I'm just using as an example. Is something like the following possible?

const props = {
  test: true,
  destructure: 'yes'
}

const TestComponent = (props, {desctructure}) => {
  return <div>Not Important, but not having a return bothered me enough to add it</div>;

I'm well aware that I can do this:

const TestComponent = (props) => {
  const { destructure } = props;
  return <div>Another return</div>;

My reasoning for why this would be useful:

When navigating through large and overly plex ponents, I feel like the first option would make reading props much easier as it would stick out that these values are ing from props. Of course, a prop value could be written as props.destructure, but this almost feels like too much boilerplate if there's a lot of references.

I've been wondering this for a long time now and I really just want to make sure I'm not missing something simple here. I'm perfectly fine for doing the latter and I'm not looking for some custom implementation on this.

Share Improve this question edited Feb 14, 2022 at 13:55 isherwood 61.1k16 gold badges121 silver badges169 bronze badges asked Oct 27, 2020 at 2:36 Bobby GagnonBobby Gagnon 802 silver badges11 bronze badges 0
Add a ment  | 

3 Answers 3

Reset to default 9

The import example is a very different case. Exports are separated into the default and named exports, which can be done side by side.

What you could do, since you want to keep most of your props in the props object, but use some outside of it, is to use an object rest operator to spread the rest of the props into one object (https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax):

const TestComponent = ({destructure, ...props}) => {
  return <div>Another return</div>;
}

const TestComponent = ({destructure, ...props}) => {
  console.log(destructure,props);
  return <div>Another return
  <br/>
  destructure: {JSON.stringify(destructure)}
  <br/>
  props: {JSON.stringify(props)}
  </div>;
}

ReactDOM.render(<TestComponent test destructure="yes" />,document.getElementById('root'));
<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Sure. It's actually very straightforward to achieve this using ...rest object. In your case I called it props.

const Comp = ({ prop1, ...props }) => {
  console.log(prop1); // cat
  console.log(props.prop2); // dog
  return null;
};

export default function App() {
  return (
    <div>
      <Comp prop1="cat" prop2="dog" prop3="cow" />
    </div>
  );
}

Just be aware that your props object will no longer include destructured prop1.

There's very a hacky way, by using a default argument:

const props = {
  test: true,
  destructure: 'yes'
}

const App = (props, _, {destructure} = props) => {
  console.log(props);
  console.log(destructure);
  return 'app';
};
ReactDOM.render(<App {...props} />, document.querySelector('.react'));
<script crossorigin src="https://unpkg./react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

But it's very confusing. I wouldn't remend it. Better to destructure on the first line if needed.

Note that from the code in your question:

import React, {useEffect} from 'React'

While this looks similar to destructuring, it's something entirely different. This is import syntax. Using a plain name when importing indicates to import the default export from the other module:

import React

Using brackets indicates to import the named export from the module:

import {useEffect}

It's not destructuring.

发布评论

评论列表(0)

  1. 暂无评论