如何在父组件中设置此组件上的数据?

Question

我有一个子组件，它最终会出现在父组件中。我需要更新状态或发送数据到子函数，当一个函数在父函数中完成时(父函数中的一个按钮被按下)

const SenViewer = (data) => {
const [sen, setSen] = useState({
sens: [],
});
this.setSen({ sens: data });
return (
<div>
{this.state.sens.map((user) => (
<Card className='text-center'>
<Card.Header>
Ticket: <p>Sen </p>
</Card.Header>
<Card.Body>
<Card.Title>
<p>Entire Audio</p>
</Card.Title>
<Card.Text>
Magnitude:
<p>{user.id}</p>
Score
<p>{user.total}</p>
</Card.Text>
</Card.Body>
<Card.Footer className='text-muted'>
<Button variant='primary'>TODO: smiley if good total</Button>
</Card.Footer>
</Card>
))}
</div>
);
}; // end of component

这是父元素的渲染。

<Parent>
<SenViewer />
</Parent>

Answer 1

在你的父组件中创建一个状态，它将保存你想要发送的数据。

const Parent = () => {
const [data,setData] = React.useState({});
React.useEffect(()=> {
setData({name:'sd'});
},[setData]);

return <div>
<SenViewer data={data} />
</div>
}

在子组件中，像这样使用

const SanViewer = (props)=> {
console.log(props.data) // received data from parent
}

在这里阅读更多关于道具的内容https://reactjs.org/docs/components-and-props.html

Answer 2

可以通过props将数据传递给子组件。此外，您不需要在子组件的状态中再次设置该数据，除非有一些有状态的工作需要在子组件中完成。

<Parent>
<SenViewer data={parentData} /> 
</Parent>

这里parentData是<Parent />管理的东西，现在子进程可以使用这些信息来做它需要做的事情。

本例中父元素的一个简单示例是:

const Parent = () => { 
const [parentData, setParentData] = useState({});
return (
<div>
<button value='click me' onClick={() => setParentData({someData: 'foo'})}></button>
<SenViewer data={parentData} />
</div>
);
};