Ответ 1
Чтобы вызвать функцию, которую вы должны добавить ()
{this.renderIcon()}
Я хочу вызвать функцию внутри встроенного html. Я попробовал следующее, но функция не вызывается. Будет ли это неправильным способом вызова функции внутри метода рендеринга?
import React, { Component, PropTypes } from 'react';
export default class PatientTable extends Component {
constructor(props) {
super(props);
this.state = {
checking:false
};
this.renderIcon = this.renderIcon.bind(this);
}
renderIcon(){
console.log("came here")
return(
<div>Function called</div>
)
}
render() {
return (
<div className="patient-container">
{this.renderIcon}
</div>
);
}
}
Чтобы вызвать функцию, которую вы должны добавить ()
{this.renderIcon()}
class App extends React.Component {
buttonClick(){
console.log("came here")
}
subComponent() {
return (<div>Hello World</div>);
}
render() {
return (
<div className="patient-container">
<button onClick={this.buttonClick.bind(this)}>Click me</button>
{this.subComponent()}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Исправление было при принятом ответе. Тем не менее, если кто-то хочет знать, почему это сработало и почему реализация в вопросе SO не сработала,
Во-первых, функции - это объекты первого класса в JavaScript. Это означает, что они обрабатываются как любая другая переменная. Функция может быть передана в качестве аргумента другим функциям, может быть возвращена другой функцией и может быть назначена в качестве значения переменной. Подробнее читайте здесь.
Поэтому мы используем эту переменную для вызова функции, добавляя скобки() вконце.
Одна вещь, Если у вас есть функция, которая возвращает функцию, и вам просто нужно вызвать эту возвращаемую функцию, вы можете просто получить двойной парантез при вызове внешней функции()().
Мне нужно вызвать функцию, которая находится в componentB, которая будет возвращать div через функцию, которая находится в componentA. Как мне поступить в Реакте?