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

Question

<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()to 传递给carSelection. 像这样它构建但不显示任何按钮。我一直在尝试以与react tic tac toe 教程相同的方式进行操作。我也尝试过carSelection作为一个函数，但没有运气。

我对此无能为力form:<carSelection name = {carName} />。当它是一个可以使用的函数时，carSlection()但我不能像这样传递道具。

标签： javascriptreactjs

Answer 1

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