Question

我是React的新手，我目前正致力于一个旨在更好地学习React的个人项目。我有一个需要解决的问题陈述，我需要继续前进的想法。问题如下。

我的组件上有一个链接列表。当我点击链接时，它应该路由到一个组件，该组件根据我之前从链接列表中单击的内容显示内容（比如说......文本）。应该只有一个组件根据链接列表中单击的链接显示内容。

为了解决上述问题陈述（抱歉离题，但这确实有助于我解决上述问题），我想到了首先根据用户输入进行渲染。我想加载并显示一个PDF，其URL作为用户输入提供。 PDF位于设备目录（D：驱动器）中。我尝试过如下：

App.js

"use strict";
var React = require('react');
var createReactClass = require('create-react-class');
var InputComp = require('./inputComp');

var App = createReactClass({
getInitialState: function () {
    return { value: '' };
},

handleChange: function (valueFromChild) {
    this.setState({ value: valueFromChild });
},
render: function () {
    return (
        <div>
          <div className="container">
          <InputComp newVal={this.handleChange} />            
          <object width="800" height="470" data={this.state.value}></object>
          </div>               
          </div>
    );
}
});

module.exports = App;

InputComp.js

"use strict";

 var React = require('react');
 var createReactClass = require('create-react-class');

 var InputComp = createReactClass({  
getInitialState: function () {
    return { userInput: '' };
},

onChange: function (event) {
    this.setState({
        userInput: event.target.value
    });
    this.props.newVal(event.target.value);
},

render: function () {
    return (
        <div className="container form1">
            <input type="text" style={{ width: '800px' }} placeholder="Enter URL" value={this.state.userInput} onChange={this.onChange} />
        </div>
    );
  }
});

module.exports = InputComp;

这样做是为了动态加载PDF，如果它位于用户提供的目录URL中。当我在Chrome中检查时，对象标签中数据属性的值会更改，但页面上的PDF不会加载。

请建议如何解决这个问题。示例代码是最受欢迎的！如果需要清晰，请发表评论。

由于

导航到呈现链接特定内容的同一组件的链接列表

0 个答案: