我的React应用具有三个组件。其中两个是儿童组件,另一个是父母。我需要将数据(ProjectID(从一个子组件传递到另一个孩子到另一个孩子,然后接收到数据后,请启动功能。作为我的示例,我将ProjectID从ChildOne发送到父母,然后将ProjectID从父母发送到Childtwo。ChildTwo具有称为SetProject(ProjectID(的功能,一旦收到ProjectID,我就需要开除它。问题是,我无法通过单击ChildOne中的按钮来触发getProjectId的功能。我还尝试了componentdidmount和componentWillReceiveProps,它们对我不起作用。我该怎么做?
在这里我尝试了
ChildOne:
class ChildOne extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: 3,
};
}
sendProjectId = (projectId) => {
this.props.sendId(projectId)
}
render() {
return(
<button onClick={() => this.sendProjectId(this.state.projectId)}>
Click
</button>
)
}
}
父母:
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
};
}
getId = (proId) => {
this.setState({
projectId : proId
})
}
render() {
return(
<div>
<CildOne sendId={this.getId} />
<CildTwo sendOneId={this.state.projectId} />
</div>
)
}
}
childtwo:
class ChildTwo extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
};
}
getProjectId = (this.props.sendOneId) => {
//Do something with this.props.sendOneId
}
render() {
return(
<div></div>
)
}
}
这将取决于ChildTwo
想要用所述数据完成的工作。
案例1:
ChildTwo
打算用相应的projectId
获取一些数据并将其显示在组件中。然后,您可以轻松地在父组件中获取此数据,并将数据传递为props
。
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
dataForChildTwo: null,
};
}
getId = (proId) => {
this.setState({
projectId : proId,
dataForChildTwo: fetchData(proId)
})
}
render() {
return(
<div>
<CildOne sendId={this.getId} />
<CildTwo data={this.state.dataForChildTwo} />
</div>
)
}
}
情况2:
ChildTwo
打算在projectId
更改时对其中的某些内容进行一些更改。然后,您可以使用componentDidUpdate
挂钩查看是否更改了Prop并响应它。
class ChildTwo extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
};
}
getProjectId = (this.props.sendOneId) => {
//Do something with this.props.sendOneId
}
componentDidUpdate(prevProps) {
if(this.props.projectId!==prevProps.projectId) {
// do something
}
}
render() {
return(
<div></div>
)
}
}
情况3 :
如果上述情况都不适合您,那么当projectId
使用key
属性更改时,您可以手动重新加载完整的组件:
<CildTwo key={this.state.projectId} sendOneId={this.state.projectId} />
注意:这非常不必要地重新加载整个组件。
您在ChildTwo
组件的getProjectId
函数中犯了一个错误。
您的功能无法从Prop中接收任何内容。
所以,您的功能应该看起来像:
getProjectId = (sendOneId) => {
//Do something with this.props.sendOneId
}
然后您应该这样使用componentWillReceiveProps
:
componentWillReceiveProps(nextProps) {
if (this.props.sendOneId !== nextProps.sendOneId) {
this.getProjectId(nextProps.sendOneId);
}
}
这是我为解决您的问题而创建的工作代码示例:https://codesandbox.io/s/5v4rn7qnll
您可能应该使用componentDidUpdate
的条件来检查state
中的ProjectID是否需要在sendOneId
更改时进行更新。然后,您可以使用setState
的回调来调用getProjectId
:
componentDidUpdate() {
const { projectId: currentProjectId } = this.state;
const { sendOneId: projectId } = this.props;
if (projectId !== currentProjectId) {
this.setState({ projectId }, () => this.getProjectId());
}
}
完整的工作示例:
class ChildOne extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: 3,
};
}
sendProjectId = (projectId) => {
this.props.sendId(projectId)
}
render() {
return (
<button onClick={() => this.sendProjectId(this.state.projectId)}>
Click
</button>
);
}
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
};
}
getId = (projectId) => {
this.setState({ projectId });
}
render() {
return (
<div>
<ChildOne sendId={this.getId} />
<ChildTwo sendOneId={this.state.projectId} />
</div>
)
}
}
class ChildTwo extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
};
}
componentDidUpdate() {
const { projectId: currentProjectId } = this.state;
const { sendOneId: projectId } = this.props;
if (projectId !== currentProjectId) {
this.setState({ projectId }, () => this.getProjectId());
}
}
getProjectId = () => {
console.log(this.state.projectId);
}
render() {
return (
<div></div>
);
}
}
ReactDOM.render(
<Parent />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>
如果要设置某些状态
,我们可以尝试使用功能组件或挂钩function ChildOne(props) {
const [projectId, setProjectId] = useState(3);
function sendProjectId(data){
props.sendId(projectId)
}
return(
<button onClick={() => sendProjectId(projectId)}>
Click
</button>
)
}
function ChildTwo(props) {
const [state, setState] = useState('')
function getProjectId(data) {
//Do something with this.props.sendOneId
console.log(`data here ${data}`)
return false;
}
getProjectId(props.sendOneId)
return (
<div>
</div>
)
}
function Parent(){
const [projectId, setProjectId] = useState('');
function getId(proId) {
setProjectId(proId)
}
return(
<div>
<ChildOne sendId={getId} />
<ChildTwo sendOneId={projectId} />
</div>
)
}