Question

我正在研究一个示例ReactJS应用程序，我希望将一个变量从一个组件传递到另一个组件。

class Layout extends React.Component{
    constructor(props) {
        super(props);
        this.state = {keyword: ''};
    }
    render() {
        return (
                 <div className="wrapper">
                   <Search />
                   <Listing />
                  </div>
        );
    }
};

ReactDOM.render(
    <Layout />, app
);

在上面的代码中，我想将一个变量从<Search />组件传递给<Listing />组件。

Answer 1

Rlijo你将道具传递给组件如下：

<Search paramA={someParam} paramB={anotherParam} /> 并使用搜索组件中的道具，您可以调用this.props.paramA（如果使用类）。

您设置组件的方式，您将无法使用Listing组件与Search组件（即Search.state中的对象）共享状态。像Redux这样的库旨在解决组件之间共享状态的问题。

道具（或变量或参数）向下流动，因此您需要从父组件提供共享道具。看到你可以提供this.state.keyword作为搜索和列表的支柱，因为这两个组件位于这个父组件内。

将变量从一个组件传递到另一个组件ReactJS

1 个答案: