Question

父元素（Board）创建子元素列表并传递方法来访问这个列表，就像这样：

export default class Board extends React.Component {
    constructor(props) {
        super(props);

        this.getList = this.getList.bind(this);

        const nodes = this.props.data.map(item => (
            <BoardItem key={item.id} next={item.next} accessSiblings={this.getList} />
        ));

        this.state = {data: this.props.data, nodes: nodes}
    }

    getList() {
        return this.state.nodes;
    }

    render() {

        return (
            <div>
                {this.state.nodes}
            </div>
        );
    } }

然后我调用 update() 方法并接收此列表，对其进行过滤并正确获取所需的对象：

update() {
    console.log(this.props.accessSiblings().find(x => x.key == this.props.next));
}

但是它返回 Symbol(react.element)，我正在尝试获取已渲染元素的“offsetTop”、“offsetHeight”等属性。

基本上，我想在一个元素中调用一个事件，该事件获取兄弟元素的一些 DOM 属性（例如 offsetTop）并更改该兄弟元素的状态。

这是正确的方法吗？感觉很hacky，目前不起作用。

Answer 1

您需要使用 "refs"（另请参阅：how to access a dom element in react）。

但是，如果可能，您应该避免使用 DOM 对象。

您确实需要一个 ref 来访问 offsetTop 等，但除此之外，您不应传递 DOM 或 ReactElements，而应仅使用状态（如“普通 javascript”对象），然后在最后一步渲染 ReactElements（JSX，如 <BoardItem ...），从不关心 DOM 元素（React 为你做的）。

通常也没有必要将 ReactElements 存储在变量或状态中，我建议您尝试一下，如果您可以多关注状态，并更多地了解 JSX 作为查看状态的一种方式 .

React 中的兄弟访问列表

1 个答案: