反应: 传递道具到功能组件

我有一个关于道具和功能组件的看似琐碎的问题。基本上，我有一个容器组件，它在状态改变时呈现一个 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>
);
};

例如: 假设我想从 Modal 组件内部调用 this.firstNameChange。我想把道具传递给函数组件的“解构”语法让我有点困惑。即:

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

193081 次浏览
小开
最佳答案

You would need to pass down each prop individually for each function that you needed to call 

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

and then in the CreateProfile component you can either do 

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

with destructuring it will assign the matching property names/values to the passed in variables. The names just have to match with the properties

or just do

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

and in each place call props.onHide or whatever prop you are trying to access.

小开

An addition to the above answer.

If React complains about any of your passed props being undefined, then you will need to destructure those props with default values (common if passing functions, arrays or object literals) e.g.

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

I'm using react function component
In parent component first pass the props like below shown

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;

Then use the props in child component like below shown

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

just do this on source component

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

then do this on destination component

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

A variation of finalfreq's answer

You can pass some props individually and all parent props if you really want (not recommended, but sometimes convenient)

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

and then in the CreateProfile component you can just do

const CreateProfile = (props) => {

and destruct props individually

const {onFirstNameChange, onHide, show }=props;

提交答案