Question

我是ReactJS的新手，这不是我自己的项目，我正在尝试找出问题。

这是我的if(session()->has('item')) { $name = session()->get('item.name'); $normalIdSession = session()->get('item.normalIdSession'); $guestsSession = session()->get('item.guestsSession'); $amountSession = session()->get('item.amountSession'); // Here data storing in to database and deleting sessions. session()->forget('item'); dd($name); // Here I can access session data. }渲染

index.js

所以我想发生的是，在我的render() { console.log("this.props", this.props.params) console.log("slug", this.props.params.brandName) var { data, items2 } = this.state let { brandList, brandProducts } = this.props var { data } = this.props.brandProducts var filterImage = brandList.data.length === 0 ? [] : brandList.data.data.filter((item) => item.slug === this.props.params.brandName)[0].media var name = brandList.data.length === 0 ? "" : brandList.data.data.filter((item) => item.slug === this.props.params.brandName)[0].name var checkImage = filterImage.length === 0 ? [] : filterImage.filter((item) => item.collection_name === "images") var checkBanner = filterImage.length === 0 ? [] : filterImage.filter((item) => item.collection_name === "banner-image") return ( <div> { this.props.brandList.loading ? <LoadingSection/> : <div> <Banner data={checkBanner}/> <div className="row margin-none"> <div className="col-lg-2" style={{backgroundColor: "white"}}> { _.isEmpty(checkImage) ? <div className="card shadow rounded mx-auto brand-logo-text card-logo-text"><h2 className="align-middle text-center">{name}</h2></div> : <img src={checkImage[0].url} className="img-thumbnail shadow mx-auto rounded brand-logo" alt="..."/> } <AdvancedSearch /> //some more code here中，我想传输此代码。

AdvancedSearch.js

，然后在AdvancedSearch呈现器中的某处

    var filterImage = brandList.data.length === 0 ? [] : brandList.data.data.filter((item) => item.slug === this.props.params.brandName)[0].media

    var name = brandList.data.length === 0 ? "" : brandList.data.data.filter((item) => item.slug === this.props.params.brandName)[0].name

    var checkImage = filterImage.length === 0 ? [] : filterImage.filter((item) => item.collection_name === "images")

但是它说brandName是未定义的。

我的路线

{
_.isEmpty(checkImage)   ? <div className="card shadow rounded mx-auto brand-logo-text card-logo-text"><h2 className="align-middle text-center">{name}</h2></div>
: <img src={checkImage[0].url} className="img-thumbnail shadow mx-auto rounded brand-logo" alt="..."/>

}

指向我的<Route path="/:brand/:brandName" component={Brand} />。如何将参数从index.js传递到index.js？

编辑：：

AdvancedSearch.js

返回

console.log("this.props", this.props.params)

和

{brand: "seller", brandName: "nestle"}

返回

console.log("slug", this.props.params.brandName)

Answer 1

将数据从父级发送到子级组件的最佳方法是通过道具。

在您的情况下，您可以在index.js文件中包含以下内容：

<AdvancedSearch brandList={this.props.brandList} brandProduct={this.props.brandProducts} params={this.props.params} />

在您的AdvancedSearch.js中，请不要忘记“捕获”正在使用的变量中的内容，这意味着在此文件中再次声明：

const { brandList, brandProducts } = this.props
const { data } = this.props.brandProducts

AdvancedSearch也必须是Class组件，因为它引用了“ this.props.params”，如果将其设为无状态，则引用props.params并在函数声明中添加props参数。

Answer 2

将道具从父级传递到子级组件以在子级组件中访问它。假设您要在AdvancedSearch中访问brandName，您需要将其添加到父项中，然后才能访问子组件中的brandName（AdvancedSearch js文件）

将此this.props.params传递给子组件

2 个答案: