어떻게 하면 다른 소품들을 넘겨서 반향을 일으킬 수 있을까요?

어떻게 하면 다른 소품들을 넘겨서 반향을 일으킬 수 있을까요?

예를 들어, 클래스 베이스의 컴포넌트가 필요로 하는 3개의 소품이 있습니다.

<Component propOne={this.props.one} propTwo={this.props.two}>
  {this.props.children}
</Component>

내가 원래 기대하지 않았던 다른 소품들을 어떻게 물려줄 수 있을까? 하지만 내 컴포넌트를 사용하는 다른 누군가가 사용하길 원한다고 말할 수 있을까?

생각해 봤는데

<Component propOne={this.props.one} propTwo={this.props.two} {...this.props} >
  {this.props.children}
</Component>

그러나 프롭 복제가 우려된다.

확산 구문 사용:

const {propOne, propTwo, ...leftOver} = this.props;
// `leftOver` contains everything except `propOne` and `propTwo`

예를 들면 다음과 같습니다.

const { propOne, propTwo, children, ...props } = this.props;

<Component propOne={propOne} propTwo={propTwo} {...props}>
    {children}
</Component>

---

구문 확산(...를 사용하면 0 이상의 인수(함수 호출용) 또는 요소(배열 리터럴용)가 예상되는 장소에서는 어레이 식이나 문자열 등의 반복 가능을 전개할 수 있으며, 0 이상의 키와 값의 쌍(개체 리터럴용)이 예상되는 장소에서는 오브젝트 식을 전개할 수 있습니다.

출처 : MDN

확산 연산자는 훌륭하지만 튜토리얼에서 발견하지 못해 놀랐습니다.그리고 그것을 설명하는 신뢰할 수 있는 소스를 찾는데 오랜 시간이 걸렸습니다.작동 방식을 의심하는 경우, JSX In Deepth라는 작은 기사의 공식 ReactJS POD에 대한 자세한 내용은 다음과 같습니다.

오브젝트로 이미 소품이 있고 JSX에서 소품을 전달하려면 ...을 "확산" 연산자로 사용하여 전체 소품 개체를 전달할 수 있습니다.이들 2개의 컴포넌트는 동일합니다.

 return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
 const props = {firstName: 'Ben', lastName: 'Hector'};
 return <Greeting {...props} />;
}```

그리고 물론, 당신의 경우엔, 아이들 중 몇 명만 넘겨주길 원하는...

const Button = props => {
 const { kind, ...other } = props;
 const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
 return <button className={className} {...other} />;
};

위의 예에서는 이 종류의 소품은 안전하게 소비되며 DOM 내의 요소에 전달되지 않습니다.다른 모든 소품들은 다른 오브젝트를 통해 전달되기 때문에 이 컴포넌트는 매우 유연합니다.onClick 및 Children 소품 전달을 볼 수 있습니다.

출처: ReactJS.org: JSX 상세, 리액트 요소 유형 지정, 속성 확산.

구체적인 경우...

const {propOne, propTwo, ...newChildProps} = this.props;
<Component
    propOne={this.props.one}
    propTwo={this.props.two}
    {...newChildProps}
>{children}</Component>

✅ 방법은 다음과 같습니다.

export default function Button(props) {
  const { children, label, ...rest } = props;
  
  return (
    <button
      {...rest}
      aria-label={label}
    >
      {children}
    </button>
  )
}

✨특정 소품과 같은 이름의 속성이 필요하지 않을 때도 있으므로, 여기서 추출했습니다.label전달해 드렸습니다.aria-label.

필터링?

function without(props, keys) {
  return Object.keys(props)
    .filter((key) => keys.indexOf(key) !== -1)
    .reduce((retVal, key) => {
      retVal[key] = props[key];
    }, {});
}

<Component propOne={this.props.one} propTwo={this.props.two} {...without(this.props, ['one', 'two'])} >
  {this.props.children}
</Component>

전체 속성을 하나의 속성 이름으로 개체로 보내려고 합니다.이것처럼만.

class ParentComponent extends Component{

    state={
      person:{
         id=1,
         name="rashid",
         family="behnam"
             }
         }
render(){
return <ChildComponent wholething={this.state.person} />
        }
}
//------------------------------------------
class ChildComponent extends Component{
render(){
     const {id,name,family}=this.props.wholething;
         return (
                <div someId={id}>
                   <h3>My name is :{name}</h3>
                   <h4>My family is :{family}</h4>
                </div>
                );
      }
}

언급URL : https://stackoverflow.com/questions/41534160/how-to-pass-all-other-props-to-react-class