我的结构如下所示:
Component 1
- |- Component 2
- - |- Component 4
- - - |- Component 5
Component 3
组件3应该根据组件5的状态显示一些数据。
因为道具是不可变的，我不能简单地在组件1中保存它的状态并转发它，对吗?是的，我读过Redux，但我不想使用它。我希望只用react就能解决这个问题。我错了吗?
当前回答
只需通过props将父组件的setState函数传递给子组件。
function ParentComp() {
const [searchValue, setSearchValue] = useState("");
return <SearchBox setSearchValue={setSearchValue} searchValue={searchValue} />;
}
然后在子组件中:
function SearchBox({ searchValue, setSearchValue }) {
return (
<input
id="search-post"
type="text"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search Blogs ..."
/>
)
}
处理子组件点击的第二个例子:
// We've below function and component in parent component
const clickHandler = (val) => {
alert(`httpRequest sent. \nValue Received: ${val}`);
};
// JSX
<HttpRequest clickHandler={clickHandler} />
这就是你如何从父组件中获取函数，然后传递一个值并通过它触发clickHandler。
function HttpRequest({ clickHandler }) {
const [content, setContent] = useState("initialState");
return (
<button onClick={() => clickHandler(content)}>
Send Request
</button>
);
}
export default HttpRequest;
其他回答
如果你想要更新父组件，
class ParentComponent extends React.Component {
constructor(props){
super(props);
this.state = {
page: 0
}
}
handler(val){
console.log(val) // 1
}
render(){
return (
<ChildComponent onChange={this.handler} />
)
}
}
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
page: 1
};
}
someMethod = (page) => {
this.setState({ page: page });
this.props.onChange(page)
}
render() {
return (
<Button
onClick={() => this.someMethod()}
> Click
</Button>
)
}
}
这里的onChange是一个带有“handler”方法绑定到其实例的属性。我们将方法处理程序传递给子类组件，通过props参数中的onChange属性接收。
onChange属性将在props对象中设置，如下所示:
props = {
onChange: this.handler
}
并传递给子组件。
所以子组件可以像props. onchange这样访问props对象中的name值。
这是通过使用渲染道具完成的。
现在子组件有一个按钮“Click”，带有一个onclick事件集，用于调用通过props参数对象中的onChange传递给它的处理程序方法。所以现在子类中的this.props.onChange保存了父类中的输出方法。
参考资料和演职员表:Bits and Pieces
这是如何使用新的useState钩子。
方法-将状态改变器函数作为道具传递给子组件，并对该函数做任何你想做的事情:
import React, {useState} from 'react';
const ParentComponent = () => {
const[state, setState]=useState('');
return(
<ChildComponent stateChanger={setState} />
)
}
const ChildComponent = ({stateChanger, ...rest}) => {
return(
<button onClick={() => stateChanger('New data')}></button>
)
}
只需通过props将父组件的setState函数传递给子组件。
function ParentComp() {
const [searchValue, setSearchValue] = useState("");
return <SearchBox setSearchValue={setSearchValue} searchValue={searchValue} />;
}
然后在子组件中:
function SearchBox({ searchValue, setSearchValue }) {
return (
<input
id="search-post"
type="text"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search Blogs ..."
/>
)
}
处理子组件点击的第二个例子:
// We've below function and component in parent component
const clickHandler = (val) => {
alert(`httpRequest sent. \nValue Received: ${val}`);
};
// JSX
<HttpRequest clickHandler={clickHandler} />
这就是你如何从父组件中获取函数，然后传递一个值并通过它触发clickHandler。
function HttpRequest({ clickHandler }) {
const [content, setContent] = useState("initialState");
return (
<button onClick={() => clickHandler(content)}>
Send Request
</button>
);
}
export default HttpRequest;
我想感谢得到最多赞的回答，因为他给了我自己的问题的想法，基本上是用箭头函数和从子组件传递参数的变化:
class Parent extends React.Component {
constructor(props) {
super(props)
// without bind, replaced by arrow func below
}
handler = (val) => {
this.setState({
someVar: val
})
}
render() {
return <Child handler = {this.handler} />
}
}
class Child extends React.Component {
render() {
return <Button onClick = {() => this.props.handler('the passing value')}/ >
}
}
希望它能帮助到别人。
要设置子进程中父进程的状态，可以使用回调函数。
const Child = ({handleClick}) => (
<button on click={() => handleClick('some vale')}>change value</button>
)
const parent = () => {
const [value, setValue] = useState(null)
return <Child handleClick={setValue} />
}
在你的结构中，组件1和组件3似乎是兄弟。所以你有三个选择:
1-将状态放入它们的父级(不推荐4层父子级)。
2-同时使用useContext和useRducer(或useState)。
3-使用状态管理器，如redux, mobx…
