反應：如何訪問 class 組件中的功能組件的道具

Question

// React is loaded and is available as React and ReactDOM
// imports should NOT be used
const TodoItem = (props) => <li onClick={props.onClick}>{props.item.text}</li>

class TodoList extends React.Component {
  render() {
    const { items, onListClick } = this.props;
    return (<ul onClick={onListClick}>
      {items.map((item, index) => 
                 <TodoItem item={item} key={index} onClick={this.handleItemClick.bind(this, item)}/>)}
    </ul>);
  }
  
  handleItemClick(item, event) {
    // Write your code here
    if(item.done == true) {
      event.stopPropagation();
    } else {
      this.props.onItemClick(item, event);
    }
  }
}


const items = [ { text: 'Buy grocery', done: true },
  { text: 'Play guitar', done: false },
  { text: 'Romantic dinner', done: false }
];

const App = (props) => <TodoList
  items={props.items}
  onListClick={(event) => console.log("List clicked!")}
  onItemClick={(item, event) => { console.log(item, event) }}
/>;

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<App items={items}/>, rootElement);

在功能性 App 組件中，我將屬性onItemClick分配給 ToDoList 組件，該組件是 class 組件。

在 class 組件 ToDoList 中，我使用

this.props.onItemClick(item, event); 

如何將道具從功能組件傳遞到 class 組件或從 class 組件傳遞到功能組件

當this在功能組件中不起作用時，為什么我可以使用this來訪問功能組件的道具？

Answer 1

每當我們嘗試使用 class 組件訪問道具或 state 時，我們都需要使用“this”關鍵字。 但是，功能組件不必使用“this”關鍵字。

在函數組件中，我們將 props 作為 function 的參數傳遞。 在這種情況下，您必須使用props.name而不是this.props.name 。

const FunctionalComponent = (props) => {
 return <h1>Hello, {props.name}</h1>;
};

下面是 class 的示例。 由於是class，所以需要用這個來指代道具。

class ClassComponent extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, { name }</h1>;
 }
}