반응: 기능 컴포넌트에 소품 전달

반응: 기능 컴포넌트에 소품 전달

소품이나 기능 컴포넌트에 대해 사소한 질문이 있습니다.기본적으로 사용자의 버튼 클릭에 의해 트리거되는 상태 변경 시 Modal 컴포넌트를 렌더링하는 컨테이너 컴포넌트가 있습니다.모달은 컨테이너 컴포넌트 내부에 존재하는 함수에 연결해야 하는 일부 입력 필드를 저장하는 스테이트리스 함수 컴포넌트입니다.

질문입니다.사용자가 상태 비저장 Modal 구성 요소 내의 양식 필드와 상호 작용하는 동안 상위 구성 요소 내부에 있는 함수를 사용하여 상태를 변경하려면 어떻게 해야 합니까?제가 소품을 잘못 전달한 건가요?

컨테이너.

export default class LookupForm extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            showModal: false
        };
    }
    render() {
        let close = () => this.setState({ showModal: false });

        return (
            ... // other JSX syntax
            <CreateProfile fields={this.props} show={this.state.showModal} onHide={close} />
        );
    }

    firstNameChange(e) {
      Actions.firstNameChange(e.target.value);
    }
};

기능(모달) 컴포넌트

const CreateProfile = ({ fields }) => {
  console.log(fields);
  return (
      ... // other JSX syntax
      
      <Modal.Body>
        <Panel>
          <div className="entry-form">
            <FormGroup>
              <ControlLabel>First Name</ControlLabel>
              <FormControl type="text"
                onChange={fields.firstNameChange} placeholder="Jane"
                />
            </FormGroup>
  );
};

예: 전화하고 싶다고 합니다.this.firstNameChange모달 컴포넌트 내에서.기능 컴포넌트에 소품을 전달하는 "파괴적" 구문 때문에 조금 혼란스러웠습니다.예:

const SomeComponent = ({ someProps }) = > { // ... };

호출해야 하는 각 기능에 대해 각 소품을 개별적으로 전달해야 합니다.

<CreateProfile
  onFirstNameChange={this.firstNameChange} 
  onHide={close}
  show={this.state.showModal}
/>

다음으로 CreateProfile 컴포넌트에서 다음 중 하나를 수행할 수 있습니다.

const CreateProfile = ({onFirstNameChange, onHide, show }) => {...}

소멸 시 일치하는 속성 이름/값이 전달된 변수에 할당됩니다.이름은 속성과 일치해야 합니다.

아니면 그냥 하든지

const CreateProfile = (props) => {...}

각 장소의 전화props.onHide또는 접근하려는 소품도 마찬가지입니다.

리액트 기능 컴포넌트를 사용하고 있습니다.
부모 구성 요소에서는 먼저 아래와 같은 소품을 전달합니다.

import React, { useState } from 'react';
import './App.css';
import Todo from './components/Todo'



function App() {
    const [todos, setTodos] = useState([
        {
          id: 1,
          title: 'This is first list'
        },
        {
          id: 2,
          title: 'This is second list'
        },
        {
          id: 3,
          title: 'This is third list'
        },
    ]);

return (
        <div className="App">
            <h1></h1>
            <Todo todos={todos}/> //This is how i'm passing props in parent component
        </div>
    );
}

export default App;

그런 다음 아래 그림과 같이 소품을 하위 구성 요소에 사용합니다.

function Todo(props) {
    return (
        <div>
            {props.todos.map(todo => { // using props in child component and looping
                return (
                    <h1>{todo.title}</h1>
                )
            })}
        </div>  
    );
}

위의 답변에 추가.

한다면React당신의 합격에 대해 불평하다props존재undefined그럼 그 소품들을 파괴할 필요가 있습니다.default(함수, 배열 또는 객체 리터럴을 통과하는 경우 공통) 예:

const CreateProfile = ({
  // defined as a default function
  onFirstNameChange = f => f,
  onHide,
  // set default as `false` since it's the passed value
  show = false
}) => {...}

소스 컴포넌트에서만 이 작업을 수행합니다.

 <MyDocument selectedQuestionData = {this.state.selectedQuestionAnswer} />

대상 컴포넌트에서 이 작업을 수행합니다.

const MyDocument = (props) => (
  console.log(props.selectedQuestionData)
);

finalfreq의 답변 변형

소품 몇 개, 부모 소품 모두 꼭 필요한 경우 전달 가능 (추천은 아니지만 편리한 경우도 있음)

<CreateProfile
  {...this.props}
  show={this.state.showModal}
/>

CreateProfile 컴포넌트에서 다음 작업을 수행할 수 있습니다.

const CreateProfile = (props) => { 

소품을 개별적으로 파괴하고

const {onFirstNameChange, onHide, show }=props;

언급URL : https://stackoverflow.com/questions/39963565/react-passing-props-to-function-components