반응 전달 소품(하나 제외)

반응 전달 소품(하나 제외)

대체 소품에 대한 반응 제안입니다.깔끔해!

소품 하나 빼고 다 어떻게 옮기죠?

render: function(){
  return (<Cpnt {...this.propsButOne}><Subcpnt one={this.props.one} /></Cpnt>);
}

다음 기술을 사용하여 일부 소품을 소비하고 나머지 소품을 전달할 수 있습니다.

render() {
  var {one, ...other} = this.props;
  return (
    <Cpnt {...other}>
      <Subcpnt one={one} />
    </Cpnt>
  );
}

원천

필요한 것은 소품 오브젝트의 복사본을 작성하고 원하지 않는 키를 삭제하는 것입니다.가장 쉬운 방법은omit부터lodash하지만 코드도 조금 쓸 수 있습니다(하나를 제외한 모든 소품 키를 가진 새로운 오브젝트를 만듭니다).

생략 포함(임포트하는 패키지/ES 플레이버에 따라 상단에 있는 몇 가지 옵션):

const omit = require('lodash.omit');
//const omit = require('lodash/omit');
//import { omit } from 'lodash';

...
render() {
    const newProps = omit(this.props, 'one');
    return <Cpnt {...newProps}><Subcpnt one={this.props.one} /></Cpnt>;
}

만약 당신이 원하지 않는 소품들이 많다면...rest예를 들어 default Props는 모두 두 번 쓰는 것이 귀찮을 수 있습니다.대신 다음과 같은 현재 소품 위에 간단한 루프를 사용하여 직접 만들 수 있습니다.

let rest = {};
Object.keys(this.props).forEach((key, index) => {
    if(!(key in MyComponent.defaultProps))
       rest[key] = this.props[key];
});

감사합니다 @villeaka!

다음은 다른 사람들이 사용법을 더 잘 이해할 수 있도록 귀사의 솔루션을 사용한 예입니다.

기본적으로 상태 비저장 랩 구성 요소를 만들기 위해 사용했고, 이 구성 요소를 내부 구성 요소(카드)에 전달해야 했습니다.

이 래퍼를 사용하는 다른 최상위 컴포넌트 내의 렌더링 로직 때문에 래퍼가 필요했습니다.

<TopLevelComponent>
  {/* if condition render this: */}
  <CardWrapper {...props}> {/* note: props here is TLC's props */}
    <Card {..propsExceptChildren}>
      {props.children}
    </Card>
  </CardWrapper>
  {/* if other condition render this: */}
  {/* ... */}
  {/* and repeat */}
</TopLevelComponent>

여기서 래퍼의 H4 뒤에 무엇이 오는지 결정하는 것은 몇 가지 조건입니다(아래의 실제 렌더링 노드 트리 참조).

그래서 기본적으로 코드 복제는 하기 전에 앞에 오는 부분 전체를 쓰는 것으로 하고 싶지 않았습니다.{children}아래 예에서는 위의 예에서 여러 종류의 래퍼를 렌더링하는 최상위 컴포넌트의 조건부 암 각각에 대해 다음과 같습니다.

const CardWrapper: React.FC<IRecentRequestsCardProps> = (props) => {
  const { children, ...otherProps } = props;
  return (
    <Card {...otherProps} interactive={false} elevation={Elevation.ONE}>
      <H4>
        <a href="/">Unanswered requests</a>
      </H4>
      {children}
    </Card>
  );
};

리액트 렌더 함수의 구체적인 사용:

if (error)
  return (
    <CardWrapper {...props}>
      <SimpleAlert title="Eroare" intent={Intent.DANGER}>
        {error}
      </SimpleAlert>
    </CardWrapper>
  );

if (loading)
  return (
    <CardWrapper {...props}>
      <NonIdealState
        icon="download"
        title="Vă rog așteptați!"
        description="Se încarcă cererile pentru articole..."
      />
    </CardWrapper>
  );

if (!data)
  return (
    <CardWrapper {...props}>
      <NonIdealState
        icon="warning-sign"
        title="Felicitări!"
        description="Nu există cereri fără răspuns."
      />
    </CardWrapper>
  );

// etc.

따라서 위에서는 H4 헤더를 래퍼의 자녀 앞에 추가하고 H4 헤더가 내부 카드 컴포넌트에 전달된 소품도 전달합니다.

지금까지 내가 찾은 가장 간단한 방법:

const obj = {
  a: '1',
  b: '2',
  c: '3'
}

const _obj = {
  ...obj,
  b: undefined
}

이로 인해_obj제외한 모든 소품을 가지고 있는 모습b

이것을 시험해 보세요.

function removeProps(obj, propsToRemove) {
   let newObj = {};
   Object.keys(obj).forEach(key => {
   if (propsToRemove.indexOf(key) === -1)
   newObj[key] = obj[key]
   })
   return newObj;
}

const obj = {nome: 'joao', tel: '123', cidade: 'goiania'}

const restObject = removeProps(obj, ['cidade', 'tel'])

console.log('restObject',restObject)

restObject
{
  nome:"joao"
}

머티리얼 UI를 확장할 때 이 문제가 발생하였습니다.알 수 없는 속성이 조금이라도 전달되면 구성 요소가 경고를 보냅니다.전달하고 싶지 않은 속성을 삭제함으로써 문제를 약간 다르게 해결했습니다.

const passableProps = { ...props } as Partial<typeof props>;
delete passableProps.customValidity;
return (
    <TextField { ...passableProps } // ...
);

언급URL : https://stackoverflow.com/questions/35152522/react-transferring-props-except-one