reactjs - React Props - 无法获取数据

Question

当我定义如下变量 (var myCheese) 时，我无法使用 React Props；

    function TodoComponent(props) {
        return <div>
            <h1> Move Name : {props.name}</h1>
            <h2> Genre : {props.genre}</h2>
            <p>Cheese nameis: {props.nameis}</p>
            <p>Cheese smellFactor: {props.smellFactor}</p>
            <p>Cheese price: {props.price}</p>
        </div>;
    }
    var myCheese = { nameis: 'Camembert', smellFactor: 'Extreme pong', price: '3.50' };
    ReactDOM.render(
        <div>
            <TodoComponent name="Gladiator" genre="Action" />
            <TodoComponent name="Goodfellas" genre="Drama,Gangsters" />
            <TodoComponent cheese={myCheese} />
        </div>,
        document.getElementById('todo-wrapper')
    );

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="todo-wrapper"></div>

用于名称和流派的方法有效，但用于奶酪的方法无效。我无法从中获取数据。感谢您的帮助!

Answer 1

您正在将一个名为“奶酪”的 Prop 传递给您的 TodoComponent，但您实际上并没有对该 Prop 执行任何操作。您似乎希望传递给“cheese” Prop 的对象的属性以某种方式解析为多个 Prop “nameis”、“smellFactor”和“price”，但这不是 Prop 的工作方式。

你有两个选择:

<强>1。将每个“myCheese”属性作为单独的 Prop 传递

<TodoComponent 
    nameis={myCheese.nameis}
    smellFactor={myCheese.smellFactor}
    price={myCheese.price}
/>

……或者……

<强>2。在您的组件中使用“奶酪”属性

function TodoComponent(props) {
    return <div>
        <p>Cheese nameis: {props.cheese.nameis}</p>
        <p>Cheese smellFactor: {props.cheese.smellFactor}</p>
        <p>Cheese price: {props.cheese.price}</p>
    </div>;
}