当数据存在于状态范围之外时，如何使 React 组件可以访问数据答案

【问题标题】：How to make data accessible to a React Component when data exists outside of states scope当数据存在于状态范围之外时，如何使 React 组件可以访问数据
【发布时间】：2018-05-18 13:23:33
【问题描述】：

。 .

我目前在一个学校项目中使用 React VR，但将 vanilla javascript 合并到 index.html 以创建静态 HTML UI。在这种情况下，我使用 HTML5 表单将数据发布到后端，但我仍然希望使用 React 组件乐观地呈现数据，而不是必须从服务器检索数据。

我的数据是在 HTML 元素中创建的，它需要进入 React 组件。

我认为 refs 不会起作用，因为我所做的研究表明它们用于访问由 React 组件生成的数据，就我而言，我正在寻找从 HTML 流出的数据到 React 组件。

    ~ JAVASCRIPT & HTML ~

     //Accepts the Input
        <form id='idea-form'>
          <input type="text" id="hiddenInput" maxlength=95 autocomplete=off>                
        </form>


          // Initialize the React VR application.
        ReactVR.init(
         '../index.vr.bundle?platform=vr&dev=true',
          document.body
        );

我在这里包含了我的组件，减去了导入和导出。

组件映射一个字符串数组，将它们转换为 JSX，然后使用数组元素作为组件的文本道具渲染组件。

就我而言，

//========== IdeaContainer Component ==========
class IdeaContainer extends Component {

  //---------- Other Methods ----------
  mapIdeasContentToJSX(ideasObjArr) {
    newIdeas = [...ideasObjArr]enter code here
    ideasJSX = newIdeas.map((idea) => {return (<IdeaText
      text={idea.content}
      y={Math.random() * 30}
      z={Math.random() * -80}
    />)})
    return ideasJSX
  }

  //---------- Lifecycle Methods ----------
  componentDidMount(){
    this.props.preLoadIdeas()
  }

  render(){

    return(
      <View>
        {this.mapIdeasContentToJSX(this.props.ideaList)}
      </View>
    )
  }
}

这是存在于 index.html 中的代码，它存在于我的 React 组件范围之外，这意味着据我所知，我无法将其作为道具传递或将其设置为状态。

id 为 'container' 的元素是输入数据的地方，然后需要进入 React 组件

<div>
  <div id='logoDIV'class="relative" >
  <img id='logoIMG' src='./logo.png' draggable="false">
  </div>
</div>
<div id="container" style='position: fixed; z-index: 2; bottom: 1%; right: 22%;'>
    <div id="input"></div>
      <form id='idea-form'>
        <input type="text" id="hiddenInput" maxlength=95 autocomplete=off>
      </form>
</div>
      <canvas id="cloudCover"></canvas>
<!-- When you're ready to deploy your app, update this line to point to your compiled client.bundle.js -->
<script src="./client.bundle?platform=vr"></script>
<script src="./input.js"></script>
<script src='./clouds.js'></script>
<script>
  ReactVR.init(
    // When you're ready to deploy your app, update this line to point to
    // your compiled index.bundle.js
    '../index.vr.bundle?platform=vr&dev=true',
    document.body
  );
</script>
<script>
  let x = document.body.querySelector('body > div:nth-child(8) > div > a:nth-child(2)')
  x.style.bottom = '100px'
</script>

【问题讨论】：

发布你的整个反应组件

标签： html reactjs react-native scope webvr

【解决方案1】：

您正在寻找参考资料。

<input 
   type="text" 
   id="hiddenInput" 
   maxlength=95 
   autocomplete=off
   ref={(input) => { this.textInput = input; }} />

然后你可以像这样访问输入值：

this.textInput.value

https://reactjs.org/docs/refs-and-the-dom.html

【讨论】：