Вы не должны использовать метод компонента вне самого компонента (или передавая его как обратный вызов дочернему компоненту). Вы должны рассматривать их как частные методы.
Однако вы можете использовать функцию React под названием statics, чтобы предоставить функции, которые являются, доступные снаружи компонента. Однако их следует рассматривать как статические функции класса, и в результате они не получают доступа к внутренним компонентам вашего компонента (например, this.props или this.state).
Вот пример некоторой статики установки для компонента:
var Component = React.createClass({
statics: {
// these functions are available outside the component
renderToBody: function() {
React.renderComponent(
<Component />,
document.body
);
}
},
// cannot access this function outside the component
getHelloWorld: function() {
return 'Hello World!';
},
render: function() {
return (
<div>{this.getHelloWorld()}</div>
);
}
});
Так что, если мы называем React.renderComponent(Component({}), elem) то компонент будет оказывать elem, но из-за статики вы могли бы назвать Component.renderToBody() и сделает компонент непосредственно к элементу <body>.
IE: Функции, определенные внутри объекта компонента statics, доступны непосредственно как статические функции. Однако вы должны помнить, что они static в том, что они являются не частью экземпляра объекта-объекта, это просто функции, которые вы можете вызвать в классе.
Вся идея реагирования заключается в том, что компоненты как можно более автономны. Вам никогда не придется обращаться к функции экземпляра компонента напрямую извне компонента, так как вместо этого нужно просто изменить реквизиты для компонента и повторно отобразить его так, чтобы он, внутренне, мог измениться.
Вот пример того, что:
var Component = React.createClass({
propTypes: {
// always get in the habbit of using propTypes!
message: React.PropTypes.string.isRequired,
show: React.PropTypes.bool
},
render: function() {
return (
<div style={{display: this.props.show ? 'block' : 'none'}}>
{this.props.message}
</div>
);
}
});
В то время как вы, возможно, создали метод show() на компоненте вместо этого (так что вы могли бы сделать component.show(true) или component.show(false), чтобы показать/скрыть - вы вместо того, чтобы передать его в собственность для того же результата.
Calling React.renderComponent(Component({message: 'foo', show: true}), elem) сделает компонент видимым, повторный рендеринг с show: false будет скрывать его, и т.д. Тот же результат, но с реквизитом, который является реагировать способом.
Большое спасибо Майку, вы мне очень помогли! Могу ли я задать последний вопрос, пожалуйста? Насколько я понимаю, я могу подключить многие компоненты к одному узлу? Поэтому я могу их повторить? Например, если я набрал 3 измененных компонента, а затем хочу скрыть второй. – KaronatoR
Вы можете монтировать только один компонент на данном элементе html. Однако один из лучших способов борьбы с несколькими компонентами - установить родительский компонент, а затем просто сделать все, что вам нужно, от ребенка этого родителя. Но да, вы можете повторять и монтировать несколько экземпляров одного и того же компонента. В реакции это так же просто, как итерация и толкание компонентов в массив, а затем рендеринг массива внутри функции «render» компонента, такого как '