Question

我是React的新手。在我的主页组件中，我想避免硬编码＆＃34; Hello World＆＃34;在我的PageHeader里面使用道具。我试图在我的渲染函数中的另一个文件App.js中声明我的道具，标题，但没有任何东西出现。如何有效地使用React将道具与单独的文件一起使用以避免硬编码？这样做的最佳方式是什么？

我的App.js文件：

class App extends Component {

render() {  
    return (  

      <div className="App">

          <Homepage title="Hello World" />

      </div>

);
  }
}

export default App;

我的Homepage.js文件：

const Homepage = (props) => {

return (

    <div>

        <PageHeader> {props.title} </PageHeader>

    </div>
)
}

export default Homepage;

此外，我的文件也正确导入。

注意：我从React-Bootstrap导入PageHeader所以当我尝试做下面的答案时，它说它是一个重复的声明。如何更改我的代码以避免这种情况？

Answer 1

您需要将道具传递给子元素explcitly。你可以使用{... props}作为组件的一个属性/使用react的props.children来显示在标签体内传递的内容。

以下是实现你所要求的几种方法。

将道具传递给子组件：

const PageHeader = ReactBootstrap.PageHeader;
const Homepage = props => {
  return (
    <div>
      <PageHeader> {props.title} </PageHeader>
    </div>
  );
};

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Homepage title="Hello World - 1" />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.4/react-bootstrap.min.js"></script>

<div id="app"></div>

Answer 2

我想您的问题的答案可能由Javascript处理，请看一下这篇文章：https://medium.freecodecamp.org/how-to-structure-your-project-and-manage-static-resources-in-react-native-6f4cfc947d92

您可以查看他们如何使用单独的文件管理硬编码文本，然后将其导入到js文件中

const strings = {
  onboarding: {
    welcome: {
      heading: 'Welcome',
      text1: "What you don't know is what you haven't learn",
      text2: 'Visit my GitHub at https://github.com/onmyway133',
      button: 'Log in'
    },
    term: {
      heading: 'Terms and conditions',
      button: 'Read'
    }
  }
}
export default strings

您需要将该文件放入“ res”文件夹，然后可以使用res文件夹相对路径将其导入任何JS文件：

import strings from '../res/strings'

React - 使用带有单独文件的道具来避免硬编码？

2 个答案: