React：機能コンポーネントに小道具を渡す

Question

私は小道具や機能コンポーネントについては一見些細な疑問があります。基本的には、ユーザーがボタンをクリックすることによってトリガされる状態変更時にモーダルコンポーネントをレンダリングするコンテナコンポーネントがあります。モーダルは、コンテナコンポーネントの内部にある関数に接続する必要のある入力フィールドを格納するステートレス機能コンポーネントです。

私の質問：ユーザーがステートレス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 }) = > { // ... };

Answer 1

あなたはその後、CreateProfileコンポーネントにあなたがすることができるいずれかのそれぞれあなたが

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

とを呼び出すために必要な機能ごとに個別に支える伝承する必要があるだろう

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

破壊すると、渡された変数に一致するプロパティ名/値が割り当てられます。名前だけの特性

かと一致する必要がちょうど

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

を行うと、各場所のコールprops.onHideまたは任意の小道具にアクセスしようとしています。