javascript - 无法使用React在类之间传递 Prop

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.3/react-dom.min.js"></script>

class carSelection extends React.Component {
    render(){
        return(
            <Button> {this.props.name} </Button>
        );
    }
}


class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPage: 'Your Car',
            carSelected: null
        };
    }




    renderCarsList() {
        //const carNames = ['porsche', 'Ford', 'Subaru'];
        const carName = "Porsche";
        return (

            //{carNames.map((carName) => <carSelection name = {carName} />)} was inside div
            <div>
                <carSelection name = {carName} />
            </div>
        );
    }



    render() {
        const menuItems = [
            "Your Car"
        ];

        return (
            <Grid centered celled padded>
                <Grid.Row>
                    <Grid.Column width={2}>
                        {menuItems.map(item => (<Button fluid>{item} </Button>))}
                    </Grid.Column>
                    <Grid.Column width={10}>
                        {this.renderCarsList()}
                    </Grid.Column>
                </Grid.Row>
          </Grid>
          );
    }
}

export default App;

我正在尝试将道具从renderCarsList()传递给carSelection。像这样构建，但不显示任何按钮。我一直在尝试做与反应井字游戏教程相同的方法。我也尝试使用carSelection作为函数，但是没有运气。

我无法对此form:<carSelection name = {carName} />做任何事情。当它是一个函数时，它可以使用carSlection()起作用，但是我不能传递类似的道具。

最佳答案

用大写字母CarSelection写C。小写名称被认为是HTML标记。