Question

我最近开始与React合作，请原谅我，如果我的问题非常基础。组件中的道具似乎没有传递。
以下是我的代码。

dogDetails组件

select * from tab where strftime('%d-%m-%Y', date)='14-03-2015';

在Dog组件中，我有一个返回DogDetails组件的方法，如下所示。

import React from 'react';

const DogDetails = (props) => {
    return (
        <div>
            <h4>{'Dog details of '+ props.breed}</h4>
        </div>
    )
};
export default DogDetails;

我省略了loadedDogs数组的内容以减少代码大小。以下是狗组件

import React , {Component} from 'react'
import Dog from './Dog/Dog';
import classes from './Dogs.css';
import  Aux from '../../hoc/Auxillary/Auxillary';
import {Route} from 'react-router-dom';
import DogDetails from './Dog/DogDetails/DogDetails';
class Dogs extends Component {
    state = {
        loadedDogs: []
    };
    componentDidMount () {
        this.setState({
            loadedDogs:[]
        })
    }

    dogDetailsHandler = (dog) =>{
        console.log(dog.breed);
        return <DogDetails breed={dog.breed}/>;
    };

    render() {
        const loadDogs = this.state.loadedDogs.map(dog => {
            return <Dog
                url={dog.images[0].image1}
                alt={dog.id}
                breed={dog.breed}
                temperament={dog.temperament}
                id={dog.id}
                key={dog.id}
                clicked ={() => this.dogDetailsHandler(dog)}>
            </Dog>

        });
        return (
            <Aux>
                {loadDogs}
            </Aux>
        )
    }
}
export default Dogs;

我正在像这样在MainContent组件中路由DogDetails。

import React from 'react';
import classes from './Dog.css';
import {Link, Route} from 'react-router-dom';
const dog = (props) => {
    return(
        <div className={classes.Dog}>
            <div>
                <img src={props.url} alt ={props.id}/>
            </div>
            <div>
                <h4>{'Breed: ' + props.breed}</h4>
                <h5>{'Temperament: ' + props.temperament}</h5>
                <p>
                    <Link to = '#'>... Read more ...</Link>
                </p>
                <Link to={'/shop/'+ props.id}>
                <button onClick={props.clicked}>Order</button>
                </Link>
            </div>
        </div>
    )
};
export default dog;

这是一个示例代码沙箱，用于演示我正在尝试处理的内容。我希望DogDetails组件在单击Order按钮时显示。

Code Sandbox

dogDetails组件import React from 'react'; import classes from './MainContent.css'; import Dogs from './Dogs/Dogs'; import Contact from '../Contact/Contact'; import {Route} from 'react-router-dom'; import DogDetails from './Dogs/Dog/DogDetails/DogDetails'; const main = () =>{ return ( <div className={classes.MainContent}> <Route path='/' exact component = {Dogs}/> <Route path='/shop' exact component = {Dogs}/> <Route path={'/shop/:id'} exact component={DogDetails}/> <Route path='/contact' exact component ={Contact}/> </div> ) }; export default main;标记返回undefined。请帮我找到我做错的地方。

Answer 1

大写dogDetails和dogDetailsHandler

用户定义的组件必须大写 from react docs

Codesandbox example

Answer 2

由于您使用的是路由，我不确定为什么在路由<Link />内部有一个按钮处理程序。点击此元素会将您转到/shop/:id，dogDetailsHandler的返回方法将无效。

我已经模拟了您的代码并添加了<Route />我不确定这是不是您所追求的，但是当我点击＆＃34;订购＆＃34;时，我会得到路由到/shop/:id，DogDetails组件正在按原样呈现。

在<Link />组件之后添加此路由组件，看看这是否是您所追求的行为。

<Route path="/shop/:id" render={
    () => <DogDetails {...props} />
} />

道具似乎没有在React应用程序中传递

2 个答案: