Question

我正在构建一个Web应用程序，您可以在其中配置自行车。您可以选择零件，如果单击零件，将显示零件图像，因此其样式将从none更改为block。我想使用ReactJS，但我很难理解它。除了jQuery之外，我找不到更好的方法来隐藏我想要的元素。这就是我的代码中的内容：

var bikeInfo = {
    parts: [
        {
            id: 1,
            img: "http://designyourbike.ch/dyb_img/parts/154-2015071616148075.png",
            style: {
                top: 0,
                left: "432px",
                display: "none"
            }
        },
        {
            id: 2,
            img: "http://designyourbike.ch/dyb_img/parts/189-2015071616141931.png",
            style: {
                top: 0,
                left: "432px",
                display: "none"
            }
        }
    ]
}

var Nav = React.createClass({
    handleClick: function(e) {
        e.preventDefault();

        var partID = e.target.getAttribute("data-part");

        $(".part").hide();
        $("#part-" + partID).show();
    },
    render: function() {
        var parts = this.props.bikeInfo.parts;

        var _this = this;

        return (
            <div className="nav">
                {
                    parts.map(function(part) {
                        return (
                            <a href="#" data-part={part.id} onClick={_this.handleClick}>{"Part " + part.id}</a>
                        )
                    })
                }
            </div>
        )
    }
});

var Bike = React.createClass({
    handleClick: function(e) {
        e.preventDefault();
    },
    render: function() {
        var parts = this.props.bikeInfo.parts;

        return (
            <div>
                <div className="parts">
                    <img src="http://designyourbike.ch/dyb_img/parts/152-201506308399268.png" />

                    {
                        parts.map(function(part) {
                            return (
                                <img className="part" style={part.style} id={"part-" + part.id} src={part.img} onClick={this.handleClick} />
                            )
                        })
                    }
                </div>
            </div>
        )
    }
});

React.render(<Nav bikeInfo={bikeInfo} />, document.getElementById("nav"));
React.render(<Bike bikeInfo={bikeInfo} />, document.getElementById("bike"));

我的问题是，有没有其他方法（更好，更快，更多React-ish方式）这样做，而不使用jQuery。

当前结果的直播JSFiddle：

https://jsfiddle.net/69z2wepo/12521/

Answer 1

我喜欢为要隐藏的元素添加内联样式，并显示由组件状态设置的CSS。所以无论发生什么事件，你都要将状态更新为display：none或display：inherit。

通过这种方式，没有必要让jQuery隐藏和显示。

Answer 2

创建零件组件并将其可见性传递给其道具，或者将可见性存储在其状态中。在Part的render方法中，如果当前不可见的部分则返回null，否则返回你的img标记。

在handleClick方法中，只需更改部件的可见性。 React将完成剩下的工作。

这样的事情：

var Part = React.createClass({
    render: function(){
        if(!this.props.visible) {
            return null;
        }
        return <img className="part" style={this.props.style} id={"part-" + this.props.id} src={this.props.src} onClick={this.handleClick} />
    }
});
var Bike = React.createClass({
    render: function() {
        var parts = this.props.bikeInfo.parts;

        return (
            <div>
                <div className="parts">
                    <img src="http://designyourbike.ch/dyb_img/parts/152-201506308399268.png" />

                    {
                        parts.map(function(part) {
                            return (
                                <Part visible={part.visible} style={part.style} id={"part-" + part.id} src={part.img} onClick={this.handleClick}>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
});

Answer 3

我认为最“反应”的方式是使用状态和道具。在导航组件中，将状态设置为选定的零件。然后，在渲染功能中，将自行车组件添加为接收零件状态作为道具的子组件。然后，让Bike组件查看props而不是bikeInfo来显示图像。我附上一些代码给你一个想法...

var bikeInfo = {
    parts: [
        {
            id: 1,
            img: "http://designyourbike.ch/dyb_img/parts/154-2015071616148075.png",
            style: {
                top: 0,
                left: "432px",
                display: "none"
            }
        },
        {
            id: 2,
            img: "http://designyourbike.ch/dyb_img/parts/189-2015071616141931.png",
            style: {
                top: 0,
                left: "432px",
                display: "none"
            }
        }
    ]
}

var Nav = React.createClass({
    getInitialState: function() {
        return { part: {} };
    },
    handleClick: function(part) {
        this.setState({part: part});
    },
    render: function() {
        var parts = this.props.bikeInfo.parts;
        
        var _this = this;
        
        return (
            <div>
                <div className="nav">
                    {
                        parts.map(function(part) {
                        var boundClick = _this.handleClick.bind(null, part);
                            return (
                                <a href="#" data-part={part.id} onClick={boundClick}>{"Part " + part.id}</a>
                            )
                        })
                    }
                </div>
            <div id="bike">
                <Bike part={this.state.part} />
            </div>
            </div>
            
            
        )
    }
});

var Bike = React.createClass({
    handleClick: function(e) { 
    },
    render: function() {
        return (
            <div>
                <div className="parts">
                    <img src="http://designyourbike.ch/dyb_img/parts/152-201506308399268.png" />
                    <img className="part" style={this.props.part.style} id={"part-" + this.props.part.id} src={this.props.part.img} onClick={this.handleClick} />
                </div>
            </div>
        )
    }
});

React.render(<Nav bikeInfo={bikeInfo} />, document.getElementById("nav"));

切换元素的可见性

3 个答案: