相关疑难解决方法(0)

我想从React Element的实例调用React组件公开的方法.

例如,在这个jsfiddle https://jsfiddle.net/r6r8cp3z/我想alertMessage从HelloElement引用中调用该方法.

有没有办法实现这一点,而无需编写额外的包装器？

编辑(从JSFiddle复制代码)

<div id="container"></div>
<button onclick="onButtonClick()">Click me!</button>

var onButtonClick = function () {

    //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage()
    console.log("clicked!");
}

var Hello = React.createClass({displayName: 'Hello',

    alertMessage: function() {
        alert(this.props.name);                             
    },

    render: function() {
        return React.createElement("div", null, "Hello ", this.props.name);
    }
});

var HelloElement = React.createElement(Hello, {name: "World"});

React.render(
    HelloElement,
    document.getElementById('container')
);

我正在使用RadioButtonGroup组件,它类似于无线电输入,但带有按钮:

如果使用组件很容易就像这样:

var SelectThing = React.createClass({
    render: function render() {
        // I would not like to add onClick handler to every button element
        // outside the RadioButtonGroup component
        return (
            <RadioButtonGroup onChange={this._onActiveChange}>
                <button>Thing 1</button>
                <button>Thing 2</button>
                <button>Thing 3</button>
            </RadioButtonGroup>
        )
    },

    _onActiveChange: function _onActiveChange(index) {
        console.log('You clicked button with index:', index);
    }
});

实际问题: 如何用React实现最优雅的效果？(我发现了另一个类似的问题,但它并没有完全回答这个问题).

我的第一个直觉是在组件内添加和删除onClick处理程序,以从组件的用户中删除锅炉板代码.我想到的另一个选择是给出<p>元素而不是按钮元素,并将它们放在将在RadioButtonGroup组件内创建的按钮元素中.我不太喜欢后者,因为与传递按钮相比,它在语义上没有那么多意义.

这是(显然不起作用)组件现在的样子:

// Radio input with buttons
// http://getbootstrap.com/javascript/#buttons-checkbox-radio
var RadioButtonGroup = React.createClass({
    getInitialState: function getInitialState() {
        return …

我在 React 中创建了两个组件，<Search />它们<List />都是<App />.

当单击 中的按钮时<Search />，我想从 API 中获取某些内容并在 中显示结果<List />。虽然我通过在内部执行 fetch<App />并将响应作为 prop 传递给 来完成此工作<List />，但我更愿意将 fetch 封装在内部<List />。

不幸的是，我很难找到一种方法来做到这一点。“React 方式”可能是通过一些巧妙的 prop 传递来做到这一点，但我还没有找到一种巧妙的方法来做到这一点 \xe2\x80\x93 即使需要一个“shouldFetch”布尔值获取后重置似乎很麻烦并且会触发不必要的渲染。

这个答案用于refs类似的可能有效的东西，但实际上我有点犹豫是否要尝试它，因为refs根据 React 文档，它似乎有点肮脏，因为它们“必须修改典型数据流之外的子级”。

单击<List />按钮后如何指示我的组件执行某些操作？<Search />

如果需要，我可以提供代码 \xe2\x80\x93 但希望这个问题比我看起来更简单。